Tutoriel CSS : px, em et rem

Vous ne le savez peut être pas mais il existe plusieurs unités de mesure lorsqu'il s'agit de définir la taille de la police d'une page web en CSS. Aujourd'hui je vous propose de parler de 3 unités en particulier : le px, le em et le rem.

px

Le pixel est une unité de mesure absolue (comme le pt ou le cm) ce qui veut dire que une valeur d'1px correspond à 1px de l'écran. L'avantage du pixel c'est qu'il n'est pas variant et on peut l'utiliser aisément pour définir la taille de nos différentes polices. Mais dans l'ère du tout responsive que se passe-t-il si je veux agrandir ou réduire la taille de mes textes facilement ? Avec le pixel c'est impossible on est obligé de redéfinir manuellement toutes les valeurs.

% et em

C'est là que le % et le em interviennent. Ces 2 unités sont des unités relatives qui permettent de définir la taille de la police par rapport à la taille du parent.

Equal to the computed value of the ‘font-size’ property of the element on which it is used. (W3C)[http://dev.w3.org/csswg/css-values/#em-unit]

Si dans notre body on définit une font-size de 16px alors un h1 de 2em aura une taille de 32px. On comprend assez rapidement le bénéfice de cette méthode, elle permet de définir le dimensionnement des éléments relativement à une valeure de base.
Là ou ça devient intéréssant c'est que l'on peut utiliser cette unité de mesure pour dimensionner nos éléments de manière automatique en se basant sur la taille de la police.

body{
    font-size:16px;
}
.btn{
    display:block; 
    height:2em; line-height:2em; // 2em =>  2*16 = 32px
}
.btn.big{ font-size: 32px; } // La taille du bouton sera alors doublée automatiquement

En revanche dans le cas d'éléments imbriqués le em peut s'avérer être un problème :

li{ font-size:1.2em; }
// li aura alors un font-size de 1.2 fois la taille de la police
// mais un li imbriqué li li aura alors une taille de police 1.2 * 1.2 =>  1.44 fois plus grande

Le em étant toujours relatif au parent il suffit de modifier la taille de la police du parent pour voir l'élément changer de taille. Ce qui n'est parfois pas forcément l'effet attendu.

rem

Le rem est une unité qui agit comme le em mais qui résoud le précédent prolème de l'héritage (rem = root em). Il ne se base pas sur l'élément parent pour obtenir sa taille mais sur l'élément racine. Ainsi 1rem prendra sa valeur de la font-size de votre document (body ou html). Ce qui permet d'avoir un comportement beaucoup plus prévisible que le em. Malheureusement, le rem n'est pas supporté par IE8 et Opera mini (donc prévoir un fallback en px ou em).

Pourquoi utiliser le rem/em au lieu du px ?

A l'origine les em permettaient de résoudre un problème d'accessibilité sur les "vieux" navigateur. Lorsque l'utilisateur redimensionnait votre page (CTRL+scroll) le navigateur augmentait la taille de la police de votre site, ce qui avait pour effet de tout casser.

Heureusement les navigateurs modernes n'utilisent plus cette méthode qui a maintenant été remplacée par un vrai zoom. Tous vos éléments (même ceux en pixels) sont redimensionnés en fonction du niveau de zoom.

Alors pourquoi continuer à utiliser les em ou les rem me direz-vous ? Les unités relatives permettent une maintenance plus facile du site. Définir toutes les tailles par rapport à une base permet de changer plus facilement la valeur tout en gardant une cohérence au niveau des proportions (qui n'a jamais changé sa font-size en plein milieu d'un projet).

En revanche utiliser les em ou rem pour dimensionner les éléments peut être plus discutable car on n'a plus la contrainte imposé par le zoom des anciens navigateur. En revanche ça peut être une idée intéréssante si on souhaite modifier la taille de la police en utiliser les media query (par exemple grossir la police sur un affichage desktop ou mobile tout en gardant les proportions).