Face à une propriété comme width ou font-size, le choix de l'unité paraît anodin, jusqu'à ce qu'un même 20px se comporte différemment d'un 1.25rem pourtant censé représenter la même taille. Chaque unité CSS calcule sa valeur finale à partir d'une référence différente, et connaître cette référence évite la plupart des surprises.
Ce terme donne le panorama général ; les unités les plus utilisées, rem et em et les Unités de viewport, ont chacune leur propre fiche pour le détail de leurs pièges respectifs.
Définition
Les unités CSS se répartissent en deux familles. Les unités absolues représentent toujours la même taille, quel que soit le contexte. Les unités relatives, elles, se calculent par rapport à quelque chose d'autre : un élément parent, la racine du document, ou la fenêtre du navigateur.
.bloc {
width: 300px; /* absolue : toujours 300 pixels CSS */
padding: 2rem; /* relative à la taille de police racine */
max-width: 90%; /* relative à la largeur du parent */
}Les unités absolues
| Unité | Usage réel sur écran |
|---|---|
px | La seule vraiment utilisée pour l'affichage à l'écran |
cm, mm, in, pt, pc | Pensées pour l'impression, quasiment jamais utilisées en CSS web |
20px de rester d'une taille comparable sur un écran ordinaire et sur un écran très dense.Les unités relatives
| Unité | Relative à |
|---|---|
% | La taille de l'élément parent |
em | La taille de police de l'élément lui-même, ou de son parent |
rem | La taille de police de l'élément racine, toujours la même |
vh, vw, vmin, vmax | La hauteur ou la largeur de la fenêtre visible |
ch, ex | La largeur d'un caractère ou la hauteur d'un x minuscule, dans la police en cours |
L'unité ch mérite une mention à part : elle correspond à la largeur du chiffre 0 dans la police en cours, ce qui en fait un repère pratique pour limiter la longueur d'une ligne de texte. Écrire max-width: 60ch; garantit une ligne d'environ soixante caractères quelle que soit la taille de police choisie par la personne qui lit, une largeur reconnue comme confortable pour la lecture. En dehors de ce cas précis, ch et ex restent rarement utilisées dans un projet courant.
Comment choisir en pratique
Le rem convient le mieux à la typographie et aux espacements réguliers, parce qu'il reste prévisible quel que soit l'endroit de la page où il est utilisé. Le pourcentage convient aux largeurs qui doivent suivre leur conteneur. Les Unités de viewport conviennent aux éléments pensés pour occuper tout ou partie de l'écran, comme une bannière d'accueil. Le pixel garde sa place pour ce qui doit rester une taille fixe et minime, une bordure d'un pixel ou une ombre portée. Notre formation HTML et CSS revient sur ces choix d'unité à chaque mise en page construite, pour ancrer la bonne habitude au bon endroit plutôt que de la réciter en théorie.
Combiner plusieurs unités
Rien n'empêche de mélanger ces unités dans la même feuille de style, ni même dans la même valeur grâce à calc(), qui accepte justement des opérandes d'unités différentes dans un seul calcul, comme calc(100% - 2rem).
Questions fréquentes
Non, seulement sur les écrans à densité standard. Sur un écran haute densité, le navigateur fait correspondre plusieurs pixels physiques à un seul pixel CSS, afin qu'un site conçu pour un écran ordinaire garde des proportions comparables sur un écran plus dense.
Non, ils restent parfaitement adaptés aux détails fixes comme une bordure fine ou une ombre. Ils sont surtout déconseillés pour la taille du texte et les espacements qui structurent une page, où une unité relative comme rem reste plus prévisible à grande échelle.
rem en priorité, parce qu'elle reste stable quel que soit l'élément parent et respecte le réglage de taille de texte du navigateur de la personne qui lit la page. La fiche rem et em détaille les cas où em reste malgré tout préférable.