Formation Apprendre le CSS : Les unités de mesures

Dans ce chapitre, on va faire une petite parenthèse sur les unités de mesure en CSS. C'est un sujet important, car on les rencontre partout : pour la taille du texte, les espacements, les dimensions des blocs ou encore les mises en page responsives.

On a déjà croisé les pixels et les pourcentages, mais CSS propose en réalité beaucoup plus d'unités que cela. L'idée ici n'est pas de toutes les utiliser tout le temps, mais de comprendre à quoi elles servent et dans quel contexte elles deviennent intéressantes.

Les unités absolues

Les unités absolues ont une valeur fixe, indépendante du contexte.

On retrouve par exemple :

• px pour les pixels
• cm pour les centimètres
• mm pour les millimètres
• in pour les pouces

Dans le cadre du web, les unités comme cm ou mm sont assez rares. Elles deviennent surtout utiles lorsqu'on travaille sur des styles destinés à l'impression.

En pratique, sur écran, l'unité absolue la plus utilisée reste :

width: 300px;

Le pixel est une unité fixe, très pratique quand on veut être précis. Il faut simplement garder en tête qu'il s'agit d'un pixel CSS, pas forcément d'un pixel physique réel sur l'écran.

Les pourcentages

Les pourcentages sont des unités relatives. Leur valeur dépend d'un autre élément, généralement le parent.

header {
  width: 50%;
}

Ici, header prendra la moitié de la largeur de son parent.

Largeur et hauteur en pourcentage

Pour la largeur, cela fonctionne généralement comme on l'attend. En revanche, pour la hauteur, il faut faire plus attention :

header {
  height: 100%;
}

Cette valeur ne fonctionne que si le parent a lui-même une hauteur définie. Si le parent a une hauteur automatique (auto), le navigateur ne sait pas sur quelle base calculer le pourcentage, et la valeur est ignorée.

rem, l'unité relative à la taille de texte

L'unité rem est très importante pour tout ce qui touche au texte.

body {
  font-size: 1rem;
}

1rem correspond à la taille de police de base du document, c'est-à-dire celle de l'élément racine (html). Dans la majorité des navigateurs, cela correspond par défaut à 16px.

L'intérêt de rem, c'est qu'il respecte les préférences de l'utilisateur. Si un utilisateur a augmenté la taille de police par défaut de son navigateur, toutes les valeurs définies en rem s'adaptent automatiquement.

h1 {
  font-size: 2rem;
}

Ici, le titre fera toujours deux fois la taille de base, quelle que soit la préférence définie dans le navigateur.

En pratique, rem est particulièrement adapté pour :

• les tailles de police
• certains espacements
• les systèmes d'échelle typographique

em, l'unité relative à l'élément

L'unité em fonctionne sur le même principe que rem, mais elle est relative à la taille de police de l'élément courant ou de son parent selon le contexte.

button {
  padding: 0.5em 1em;
}

Ici, le padding dépend de la taille du texte du bouton.

C'est particulièrement utile quand on veut qu'un composant garde les mêmes proportions même si sa taille de police change.

Par exemple, si on augmente la taille du texte d'un bouton :

button {
  font-size: 2rem;
  padding: 0.5em 1em;
}

Le padding grandira lui aussi automatiquement. Cela permet de conserver un équilibre visuel cohérent.

En pratique :

• rem est souvent utilisé pour la typographie globale
• em est très utile pour les espacements liés à un composant texte, comme les boutons ou les paragraphes

ch et ex

Il existe aussi d'autres unités liées à la typographie, mais elles sont plus anecdotiques.

• ex correspond approximativement à la hauteur de la lettre x
• ch correspond approximativement à la largeur du caractère 0

Par exemple :

h1 {
  width: 10ch;
}

Cette valeur peut être utile si on veut contraindre un bloc de texte à une largeur correspondant à environ 10 caractères.

Ce n'est pas parfaitement exact avec toutes les polices, mais cela peut rendre service dans certains cas précis.

vw et vh

Les unités vw et vh sont relatives à la taille de la fenêtre d'affichage.

• 1vw = 1% de la largeur du viewport
• 1vh = 1% de la hauteur du viewport

.hero {
  height: 50vh;
}

Ici, l'élément prendra la moitié de la hauteur visible de la fenêtre.

.panel {
  width: 50vw;
}

Ici, l'élément prendra la moitié de la largeur visible.

Ces unités sont très utiles pour créer :

• des sections plein écran
• des bannières adaptatives
• des blocs proportionnels à la taille de la fenêtre

vmin et vmax

CSS propose aussi deux variantes intéressantes :

• vmin = 1% de la plus petite dimension du viewport
• vmax = 1% de la plus grande dimension du viewport

Leur comportement dépend donc du ratio de la fenêtre.

Sur un écran large, vmax correspondra souvent à la largeur et vmin à la hauteur. Sur un écran haut et étroit, ce sera potentiellement l'inverse.

Ces unités sont plus spécialisées, mais elles peuvent être utiles quand on veut créer des éléments proportionnels quelle que soit l'orientation de l'écran.

Les unités viewport modernes sur mobile

Les unités vw et vh ont longtemps posé problème sur mobile. En effet, la zone visible peut varier selon que la barre d'adresse ou les barres du navigateur sont affichées ou non.

Pour répondre à cela, de nouvelles unités ont été introduites :

• lvw / lvh pour la plus grande zone visible possible
• svw / svh pour la plus petite zone visible possible
• dvw / dvh pour une zone visible dynamique

Leur principe est le suivant :

• lvh correspond à la hauteur maximale disponible
• svh correspond à la hauteur minimale disponible
• dvh suit dynamiquement les variations de l'interface du navigateur

En pratique :

• si on veut une section qui reste stable, on utilisera parfois svh ou lvh
• si on veut un vrai plein écran qui suive l'affichage réel, dvh est souvent le meilleur choix

.hero {
  min-height: 100dvh;
}

Ces unités sont surtout importantes sur mobile. Sur desktop, la différence se fait beaucoup moins sentir.

Le cas particulier de auto

auto n'est pas vraiment une unité de mesure, mais c'est une valeur très importante quand on parle de dimensions.

Son comportement dépend du contexte.

Sur la largeur et la hauteur

Pour un élément de type bloc :

width: auto;

signifie généralement que l'élément prend toute la largeur disponible.

À l'inverse :

height: auto;

signifie que la hauteur est calculée automatiquement en fonction du contenu.

Sur les marges

Avec les marges, auto a un comportement particulièrement utile :

h1 {
  width: 400px;
  margin-inline: auto;
}

Ici, le navigateur répartit automatiquement l'espace disponible à gauche et à droite. Le résultat est que l'élément se retrouve centré horizontalement.

C'est une technique très courante pour centrer un bloc.

Sur le padding

En revanche, sur padding, auto n'a pas vraiment de sens pratique. Dans les faits, cela revient à une valeur nulle.