Unités de mesure

L'unité CSS permet de dire au navigateur l'échelle à utiliser pour une valeur de taille donnée.

Par exemple, si je souhaite donner une marge à mes paragraphes, je pourrais utiliser le code suivant:

p { margin: 20px; }

Dans ce cas, j'ai:

  • Un sélecteur: p

  • Une propriété: margin

  • Une valeur: 20px

Cette valeur est à son tour composé de deux éléments: une taille 20 et une unité CSS px. Combiné, ce code permet de dire au navigateur d'appliquer une marge de 20px à tous mes paragraphes. Bien que l'unité px soit la plus fréquente, elle n'est pas toujours la mieux adaptée à toutes les situations.

Voyons voir pourquoi ✨

Absolues

Les unités absolues gardent leurs dimensions, peu importe leur contexte. Ces unités sont pratiques pour des éléments que l'on souhaite immuables.

Les pixels (px) sont l'unité absolue la plus répandue, ce qui fait du sens puisque la majorité des codes CSS sont écrits pour gérer l'affichage sur un écran. Néanmoins, il existe plusieurs autres valeurs absolues:

  • cm - Centimètres

  • mm - Millimètres

  • in - Pouces

Relatives

Contrairement aux unités absolues, les unités relatives se basent sur la dimension d'un parent pour déterminer leur dimension, ce qui les rend particulièrement utiles pour créer un site web responsive.

Ces unités peuvent paraîtres plus complexes de prime abord, mais leur utilisation permet souvent d'éviter de redéfinir des valeurs en fonctions des multiples résolutions d'écrans supportées.

  • % - Relatif au parent

  • em - Relatif à la taille fonte courante

  • rem - Relatif à la taille à la racine du document <html>

Relatives vs Absolues

Quand utiliser quelle unité?

Voici quelques exemples où une unité est préférable à une autre.

%

Pour qu'un élément prenne la moitié de la largeur de son parent, peu importe la largeur du parent en question.

.element { width: 50%; }

em

Pour qu'un texte ayant la classe .small ait une taille équivalente à la moitié du texte courant, peu importe la taille du texte courant.

.small { font-size: 0.5em; }

rem

Pour que nos éléments de titre affichent toujours de la même taille, soit 2x celle de notre texte de base, peu importe la taille du texte courant.

.title { font-size: 2rem; }

En résumé

Pour choisir la bonne unité CSS vous devrez vous poser les questions suivantes:

  • Est-ce que cet élément devrait toujours avoir une taille fixe?

  • Si non, quel élément devrait le faire varier? La dimension de son parent, la taille de la fonte courante ou celle à la base du document, etc.

👏
Merci

à Jess Mitchell et son article sur Alligator.io qui a fortement inspiré cet article.