Si vous ouvrez une feuille de style de site Web, vous rencontrerez des rems, des ems ou des pixels, ou toute combinaison de ceux-ci. Dans le style CSS, ce sont les principales unités de mesure qui sont utilisées. Que vous conceviez un site à partir de zéro ou que vous ayez "hérité" d'un site précédemment conçu que vous devez entretenir, ceux-ci sont importants pour la typographie, l'espacement et d'autres dimensions dans la conception visuelle.

Qu'est-ce qui rend une unité de mesure meilleure qu'une autre ? Il n'y a pas de réponse définitive, et selon la situation, l'un peut être préféré à l'autre. Connaître le cas d'utilisation et ce qui fonctionnera le mieux aidera à déterminer la meilleure mesure pour votre style.

pixels

Depuis les débuts du Web, les pixels sont une option que l'on retrouve partout dans les feuilles de style. Ils sont fiables, précis et leur cohérence est incomparable. Les pixels sont pris en charge dans tous les navigateurs, ce qui les rend faciles à utiliser.

Bien que les pixels soient excellents, ils ont certaines limites. Parce qu'il s'agit d'une telle mesure définie, les utilisateurs ne peuvent pas modifier la taille du texte du navigateur par défaut dans les paramètres du navigateur. Les choses n'évoluent pas comme elles le font avec ems et rems, ce qui rend difficile le changement de taille du point de vue de l'accessibilité pour l'utilisateur. On peut affirmer qu'un utilisateur peut simplement zoomer, plutôt que d'aller dans les paramètres du navigateur. Il n'y a pas de bonne ou de mauvaise réponse, c'est juste quelque chose à garder à l'esprit.

Que sont-ils?

Les pixels sont une unité de mesure basée sur la taille définie. Ils sont l'unité de mesure des dimensions sur un écran et sont utilisés lorsqu'une conception précise est requise. Nous disons des choses comme "résolution en pixels", nous sommes donc habitués à cette mesure.

Un exemple ressemblerait à ceci :

.main-header p {
font-size: 14px;
}

Les pixels ont leur utilité dans la conception Web, mais à l'ère de la conception Web indépendante des appareils, les mesures d'écran ne sont pas l'objectif principal. Il s'agit de savoir comment adapter au mieux notre contenu à d'innombrables appareils. Il existe donc des ems et des rems qui peuvent vous aider.

Ems

Cette unité de mesure a une longue histoire. Il remonte à 1996 et existe depuis les débuts de CSS. Les pixels étaient considérés comme la meilleure pratique, donc les ems n'étaient pas aussi populaires à ces débuts. Ils ont depuis gagné en popularité car leur objectif est de servir d'unité relative à la taille de la police dans un contenu spécifique et ils contribuent à la cohérence.

Que sont-ils?

Si vous aimez la typographie classique, vous avez probablement reconnu «em», car il s'agit d'une unité de mesure issue du monde des caractères imprimés. En l'utilisant comme unité de typographie, cette mesure est égale à la taille de point actuellement spécifiée. Par exemple, un em dans une police de 16 points vaut 16 points. Cette unité est la même pour toutes les polices de caractères à une taille de point donnée.

Nous ne parlons pas d'imprimés ici, alors comment l'EMS s'intègre-t-il dans la conception Web ? Le dimensionnement relatif est un argument de vente important pour ems, car il permet de contrôler le dimensionnement des éléments par rapport aux autres. Ems peut fonctionner comme d'excellents blocs de construction pour les éléments de site Web en raison du fait que les valeurs em sont composées. Cependant, il est important de vraiment comprendre comment fonctionne cette composition.

Comprendre les EMS

Dans la plupart des cas, à moins que la valeur par défaut du navigateur ne soit définie sur autre chose, un em est de 16 px. Quand vous voyez 1,5 em, cela ferait 24 pixels. Ce n'est pas toujours aussi simple cependant. Que se passe-t-il lorsque la nidification est impliquée ? Cela peut être à la fois pratique et déroutant. Savoir comment les choses fonctionnent lorsque vous travaillez avec ems aidera certainement à résoudre tout mystère. Quelle est la taille du paragraphe "Je suis imbriqué" ci-dessous ?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Il y a trois divs ici, et le paragraphe est assez imbriqué. Avec la mise en cascade du DOM, vous devrez peut-être faire un travail de détective. Disons que nous travaillons avec un em de 16px, car c'est le plus courant.

La classe .one multiplie .one par 0,5, soit 0,5 em ou 8 px. Avec la classe .two , cela se multiplie à nouveau par 0,5, soit 0,25 em ou 4px. Les choses deviennent assez petites, donc la classe de .three aidera. Nous allons prendre le .25 em et le multiplier par 2. Le résultat est 0,5 em ou 8px.

Une chose qui peut aider est de définir une taille sur l'élément HTML. Quelque chose comme ça spécifiera la taille em définie, au lieu de s'appuyer sur la valeur em définie par le navigateur. Fixons 1 em à 20px. Si cela était utilisé avec l'exemple ci-dessus, les mêmes principes d'imbrication s'appliqueraient. Gardez cependant à l'esprit que nous avons spécifié une taille de pixel, ce qui affectera la possibilité de mettre à l'échelle le texte à l'aide de l'option de configuration du navigateur.

html {

font-size: 20px;

}

En plus des pixels, la taille de la police peut également être définie avec un pourcentage. Le fait est que ems peut fonctionner avec d'autres unités de mesure. Vous rencontrerez sûrement cela, car il est assez courant de définir la police du corps sur un pourcentage pour aider à définir une ligne de base. Disons que la taille de la police commence à 62,5% de la taille em. Avec une taille em de 16px, la taille de la police serait de 10px.

body {

font-size:62.5%;

}

Une fois que vous avez compris, l'ems peut être un bon atout pour votre projet. Redimensionner le texte des sous-éléments à leurs éléments parents peut certainement être utile. En outre, ems permet de spécifier facilement un remplissage plus grand sur le conteneur de texte que ce qui peut être trouvé dans l'espacement des mots, ce qui lui permet de suivre la règle visuelle de proximité. Les éléments associés seront regroupés visuellement, avec moins d'encombrement, et fourniront une mise en page organisée.

Une autre grande caractéristique d'ems est les avantages d'accessibilité. Parce qu'il est relatif à la racine du DOM, ems le rend parfait pour redimensionner l'ensemble de la conception en fonction des préférences de l'utilisateur. Dans les préférences du navigateur, vous pouvez facilement modifier la taille de police par défaut, ce qui modifie ensuite les calculs, en ems, pour l'ensemble du site Web.

Rems

Que sont-ils?

Les rems sont un ajout assez récent à la chronologie CSS. Cette unité de mesure a été introduite avec CSS3 et résout certains des problèmes avec les pixels et ems. Avec un nom similaire à "ems", vous vous demandez peut-être ce que signifie le "r". Il vient du terme de "Root EM".

La racine est l'élément HTML. Le dimensionnement spécifié sur l'élément HTML est la base de cette mesure. Vous verrez que nous avons utilisé le dimensionnement em sur l'élément HTML ; il est acceptable de combiner les deux types de mesure.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Les navigateurs modernes prennent en charge rems, mais assurez-vous de vérifier avec BrowserStack quels navigateurs plus anciens vous devez prendre en charge avant de vous engager dans rems. Ne laissez pas les anciens navigateurs vous freiner ; vous pouvez toujours spécifier un pixel de repli pour tout ce qui est inférieur à IE9. Les navigateurs modernes ignorent les pixels car ils préfèrent les rems. Cela pourrait ressembler à ceci :

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Comprendre les rems

Vous souvenez-vous des calculs que nous avons dû faire pour les éléments imbriqués de ems ? Ce n'est pas nécessaire avec rems. Tout est basé sur cet élément racine. Nous n'avons pas à nous soucier des éléments parents, ils sont toujours basés sur la racine.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Il y a trois divs ici, et le paragraphe est assez imbriqué comme nous l'avons vu dans l'exemple em. Encore une fois, disons que nous travaillons avec une taille em de 16px.

Les classes .two .one des tailles assignées, mais elles n'ont pas vraiment d'importance ici car l'imbrication n'est pas affectée avec rems comme c'est le cas avec ems. Tout ce qui compte vraiment, c'est le style de .three, qui correspond à 2 ems. Le paragraphe serait basé sur l'élément HTML de 1em. Cette mesure serait doublée, nous donnant 2 rems ou 32 pixels.

Vous voulez tout mettre à l'échelle uniformément ? Ajustez simplement la taille de l'élément racine. Ceci est également utile lors du réglage de la taille par défaut du navigateur. Vous pouviez voir comment les ems permettaient cela, les rems aussi.

Il y a beaucoup moins de soucis à se faire concernant le comportement de nidification imprévisible avec les rems. Il est facile de comprendre où l'élément racine entre en jeu et comment cela affecte votre style lors de l'utilisation de rems.

En comparant les différentes mesures, vous pouvez voir qu'elles ont leurs avantages et leurs inconvénients. Comprendre vraiment comment fonctionnent les unités de mesure et comment elles fonctionnent avec les paramètres du navigateur vous aidera à choisir celle qui conviendra le mieux à la situation ou au projet.