Les unités de mesure rem et em offrent des avantages indéniables par rapport aux classiques px.
En utilisant les pixels, on code en dur la taille des éléments pour tous les utilisateurs. Il n'y a alors plus aucune façon pour eux de modifier la taille de la police, par exemple. Cela peut poser problème pour ceux qui souhaiterait
augmenter la taille du texte par rapport aux 16px par défaut.
Comment fonctionnent les rem ?
Les rem et em sont des unités de mesure relatives dont beaucoup de développeurs tirent parti pour préserver l'accessibilité.
Rem (root em) signifie "root element's font-size" (en français, taille de police de l'élément racine). Généralement, cette taille de police par défaut est de 16px. Donc si vous voyez une propriété font-size: 1rem , cela signifie que la taille de l'élément est de 16 pixels.
Puisque rem fait référence à l'élément racine, cela signifie qu'on peut remplacer la valeur par défaut de la taille de police en ajoutant une ligne de CSS :
:root {
font-size: 20px;
}
Désormais, 1rem = 20px.
Quid des valeurs qui ne sont pas des multiples de 16px ?
On peut passer d'une valeur en pixel en valeur rem en la divisant par 16. Par exemplen, pour utiliser une taille de police de 20px, on peut écrire font-size: 1.25rem.
Ce qui correspond à 20 divisé par 16.
Ce n'est pas très commode, non ?
En effet. Utiliser des rem va forcément prendre un peu plus de temps que d'utiliser des pixels puisqu'il faudra convertir les valeurs aux préalable.
L'avantage, c'est que l'utilisateur y gagne en liberté et l'accessibilité n'est pas entravée. L'utilisateur pourra modifier la taille de la police en ajustant la taille de l'élément racine, de cette façon :
Comment fonctionnent les em ?
Em signifie "parent element's font-size" (en français, taille de police de l'élément parent).
Comme le CSS fonctionne en cascade et prend en compte l'héritage, la valeur de l'unité em va hériter de celle de la taille de l'élément parent.
Par exemple, prenons une div parente et un paragraphe enfant à l'intérieur :
HTML :
<div>
<p>Hello world !</p>
</div>
CSS :
div {
font-size: 0.5rem; // 8px
}
p {
font-size: 1em; // ??px
}
Comme p hérite de la taille de police de son élément parent, on a 1em = 8px.
Donc p aura la propriété font-size: 8px.
Ce système peut prêter à confusion et est propice aux erreurs. C'est pourquoi il n'est pas recommandé d'utiliser les em pour les tailles de police, et de toujours utiliser rem à la place par cohérence.
Quand utiliser les em ?
Grâce à l'héritage, les unités em se réveleront utiles pour les propriétés padding et margin. Grâce aux em, l'échelle des proportions sera plus facilement respectée.
Ici, on voit bien qu'en utilisant les em, le padding reste proportionnel à la taille du texte. En revanche, avec les rem, le padding a la même taille chez les deux boutons, indépendamment de la taille des deux textes.
Faut-il vraiment arrêter d'utiliser les px ?
Personnellement, je préfère utiliser les em et les rem dans les propriétés importantes comme font-size, padding et margin. En revanche, pour ce qui est de la taille des bordures par exemple, j'utilise toujours
les pixels car la valeur utilisée est généralement très petite.