Quelles unités CSS utiliser ? et dans quel cas ?

Table des matières

• Les unités absolues
• Les unités relatives
• Quelle unité utiliser ? et quand ?
• Calculer les rem c'est compliqué !

Les unités absolues

Quand j'ai commencé à apprendre le CSS, la premiere unité de longueur que j'ai utilisée fût le pixel.

C'est la plus simple à comprendre et la plus facile à se représenter car on sait tous que nos écrans sont composés de pixels.

Le pixel, comme les autres unités CSS absolues, représentent des distances dans le monde réel.

Il en existe d'autres comme le montre l'exemple suivant:

.square-in-cm { height: 1cm; width: 1cm; } /* Taille en centimètrers */
.square-in-mm { height: 1mm; width: 1mm; } /* Taille en millimètres */
.square-in-in { height: 1in; width: 1in; } /* Taille en inches (1in = 96px = 2.54cm) */
.square-in-px { height: 1px; width: 1px; } /* Taille en pixels (1px = 1/96th of 1in) */
.square-in-pt { height: 1pt; width: 1pt; } /* Taille en points (1pt = 1/72 of 1in) */
.square-in-pc { height: 1pc; width: 1pc; } /* Taille en picas (1pc = 12 pt) */

Aujourd'hui, il existe tellement de tailles d'écrans différentes, avec des densités de pixels très variables que les unités comme le pixel ne sont plus trop adaptées.

Les unités relatives

La première unité relative que j'ai utilisée quand j'ai appris le CSS était le %.

Avant que le design responsive devienne populaire, on parlait surtout de design "fixe" ou "extensible".

A l'époque, pour faire du design dit extensible, il fallait utiliser les pourcentages.

Maitenant, d'autres unités relatives sont apparues, comme le montre ce deuxième exemple:

html {
    font-size: 16px;
}
.parent {
    font-size: 20px;
    height: 300px;
    width: 400px;
}
.square-in-em   { height: 1em; width: 1em; }     /* Equivaut à 1 fois la taille de la police du parent le plus proche -> 20px */
.square-in-rem  { height: 1rem; width: 1rem; }   /* Equivaut à 1 fois la taille de la police du parent le plus éloigné -> 16px */
.square-in-vw   { height: 1vw; width: 1vw; }     /* Equivaut à 1% de la largeur de l'écran */
.square-in-vh   { height: 1vh; width: 1vh; }     /* Equivaut à 1% de la hauteur de l'écran */
.square-in-vmin { height: 1vmin; width: 1vmin; } /* Equivaut à 1% de la taille la plus petite entre la hauteur et la largeur de l'écran */
.square-in-vmax { height: 1vmax; width: 1vmax; } /* Equivaut à 1% de la taille la plus grande entre la hauteur et la largeur de l'écran */
.square-in-p    { height: 1%; width: 1%; }       /* Equivaut à 1% de la taille de l'élement parent */

Quelle unité utiliser ? et quand ?

Désormais, dans le CSS moderne, il faut prévilégier les unités relatives car les écrans ont des densités de pixels qui varient énormement.

• Quand je définis une marge pour un élément: em si la taille doit être proportionelle au texte qu'il contient ou rem s'il doit être fixe.
• Quand je définis la taille d'un élément du layout comme la largeur d'un menu: rem si la taille doit être fixe, % / vw / vh si la taille doit être extensible.
• Quand je définis la taille de police: px car cela reste quand même le plus simple
• Quand je veux imprimer une page avec un carré de 5cm x 5cm: cm car ici le cas d'usage est concret et veut refléter la réalité.

Calculer les rem c'est compliqué !

Quand j'utilise les rem, faire la conversion systématiquement est compliqué et j'ai du mal à voir ce que 1.225rem représente sans ma calculette.

Comme les rem sont basés sur la taille de la police de la balise html, on peut toujours définir une taille facile à convertir comme ceci:

html {
    font-size: 62.5%;
}
body {
    font-size: 1.4em;
}
.first-example {
    width: 1rem; /* 10px */
}
.second-example {
    width: 1em; /* 14px */
}

Par défaut, la taille du texte sera de 14px et non de 10px, mais je pourrais toujours utiliser les rem pour obtenir des tailles qui s'adaptent aux densités de pixels des différents écrans. La conversion sera beaucoup plus lisible: 1.225rem -> 12.25px.