Le CSS n’a cessé d’évoluer ces dernières années, amenant de plus en plus de nouvelles propriétés pour dimensionner les éléments : px, rem, em, vw, vh, etc. complexifiant encore plus le développement CSS.
Vous vous sentez perdu entre toutes ces unités de dimensionnement ? Vous ne savez pas laquelle choisir pour définir la taille d’un texte, d’une image ou d’un bloc ? Faisons le point dans cet article !
Le dimensionnement en CSS
Le dimensionnement, qu’est-ce que c’est ?
Tout d’abord, expliquons ce qu’est le dimensionnement en CSS : il s’agit tout simplement de donner une taille à un élément en particulier. Il peut s’agir :
- d’un texte ;
- d’une image ;
- d’une liste ;
- d’un tableau.
Et de tout autre élément HTML qui s’affiche sur une page web. En clair, c’est via cette définition que l’on décide de la taille d’un bloc sur une page.
Pourquoi le dimensionnement CSS est important ?
Il est important de faire attention au choix des tailles des éléments, pour plusieurs raisons. Non seulement pour améliorer l’expérience utilisateur (avoir des textes lisibles en toute circonstance, des images visibles et qui ne s’écrasent pas, etc.), pour avoir une page web qui s’affiche bien, peu importe la taille de l’écran (c’est le Responsive Web Design), mais aussi pour avoir une accessibilité optimisée, y compris pour le SEO (Google se base en effet sur l’accessibilité d’un contenu web pour son ranking).
Bref, si cette attribut de style CSS peut paraître simple et basique, il ne faut pas sous-estimer sa complexité, ni son importance !
Les différentes unités de dimensionnement CSS
Maintenant que nous avons défini ce qu’était le dimensionnement en CSS, voyons les différentes unités que les feuilles de style utilisent, et comment elles fonctionnent.
L’unité basique : le pixel
Commençons d’abord par la valeur la plus utilisée, ou qui était jusqu’à récemment la plus utilisée : le pixel.
Et partons d’un principe qui paraît contre-intuitif : un pixel n’est pas (complètement) une value absolue !
Les tailles d’écran ne cessent d’évoluer, avec des résolutions toujours plus importantes. Donc, heureusement qu’un pixel n’est pas une valeur absolue, car un pixel sur un écran d’aujourd’hui n’a pas la même taille, à l’oeil, qu’un pixel sur un écran d’hier. Littéralement, et comme l’explique la documentation Mozilla, un pixel n’est pas un pixel.
Ce qu’il faut retenir, c’est qu’un pixel est égal à 1/96ème de pouce (inch en anglais, un pouce étant égal à 2,54cm). D’ailleurs, la taille des écrans s’exprime généralement en pouces, et non pas en pixels.
Cela fait du pixel une unité plutôt facile à utiliser et fiable pour les développeurs freelances, quand on connait ce principe.
Le pourcentage, toujours très utilisé
Le pourcentage comme unité de dimensionnement reste l’une des plus utilisées, et c’est normal : elle est facile à comprendre et à mettre en oeuvre. Définir la taille d’un élément avec des pourcentages, c’est tout simplement lui attribuer une taille en fonction de celle de son parent.
Par exemple, si un attribut (width, height, etc.) d’un élément est défini à ‘50%’, cela veut dire qu’il sera égal à 50% de la taille du même attribut de son parent. Par exemple
<div class="container">
<div class="content">
</div>
</div>
<style>
.container{
width: 100px;
}
.content{
width: 50%; /* sera égal à 50px */
}
</style>
Autre unité de base : em
Une autre unité couramment utilisée en CSS, c’est le em. Cette unité est relative, et définie en fonction de son parent. Attribuer 1em à un élément revient à lui donner 100% de la taille de son parent. Donc, logiquement, 0.5em lui donnera la moitié de la taille de son parent, et 2em deux fois celle-ci.
Par exemple, pour une balise ayant une taille de 20 px, et un élément enfant ayant une taille 0.5 em, ce deuxième aura, au final, une taille définie à 10 px.
Cette unité peut être utile, quand on veut justement que la taille d’un élément dépende de celle de son parent. Cependant, il faut faire attention aux éléments imbriqués, et à la façon dont le style leur est appliqué. Par exemple, si on utilise une liste à puces avec des sous-listes, on peut se retrouver confrontés au problème suivant :
<style>
.container {
font-size: 16px;
}
li {
font-size: 2em; /* Augmentation de la taille en cas d'imbrication */
}
</style>
<div class="container">
<ul>
<li>élément de liste principale</li> <!-- Taille = 16 * 2 = 32 CSS pixels -->
<li>
<ul>
<li>élément de sous-liste</li> <!-- Taille = 16 * 2 * 2 = 64 CSS pixels -->
</ul>
</li>
</ul>
</div>
Unité plus stable : rem
Il y a une autre unité qui dépend de la taille d’un parent : le rem. Mais, dans ce cas, le parent est toujours la racine de la page web : la balise HTML. 1 rem = 1 fois la taille donnée à la balise HTML.
De cette manière, l’unité rem ne bouge jamais.
Dans l’exemple de la taille de la police de caractère, la taille par défaut est settée par le navigateur à 16 px. Donc, 1 rem = 16 px, par défaut. Il est cependant possible de redéfinir cette taille, de la personnaliser.
Il suffit pour cela de modifier la taille par défaut de la balise html. Si nous voulons par exemple passer d’un format hexadécimal (base 16) à un format décimal (base 10), il suffit d’ajouter cette ligne dans le fichier CSS :
html {
font-size: 62.5%;
}
62,5% de 16 étant égal à 10, vous aurez maintenant un rem équivalent à 10 px ; ce qui sera plus simple pour calculer des tailles.
Les nouveaux venus : vh et vw
Deux nouvelles unités de dimensionnement CSS sont apparues plus récemment que les précédentes, il s’agit des vh et vw.
Ils signifient respectivement viewport height et viewport width. Viewport correspondant à la fenêtre du navigateur (ou à la vue affichée, pour être plus précis), on comprend que leur taille va être proportionnelle à celui-ci.
Et la règle est assez simple : 1 vh est égal à 1% de la hauteur du viewport (height), et 1 vw est étal à 1% de la largeur du viewport (width). En voici un exemple :
/* l'élément de classe 'container' sera un carré de width et height correspondant à 40% de la taille de la vue du navigateur */
.container {
width: 40vw;
height: 40vh;
}
Cette unité peut être utile lorsqu’on a besoin d’adapter des éléments en fonction de la vue, et uniquement en fonction de la vue.
Tableau comparatif
Nous avons cité les unités de dimensionnement les plus importantes, il en existe toutefois d’autres, qui ne sont pas recommandées, ou alors peu utilisées. Il est tout de même intéressant de les voir, et de les comparer aux unités citées plus haut. Voici donc un tableau comparatif reprenant les différentes façons de gérer le dimensionnement CSS :
| Unité | Description |
|---|---|
| px | 1/96ème de pouce |
| em | Dépend de la taille de son parent |
| rem | Dépend de la taille de l’élément racine |
| % | Relatif en pourcentage à la taille de son parent |
| vh | Relatif à la taille en hauteur du viewport |
| vw | Relatif à la taille en largeur du viewport |
| vmin | Relatif au côté de la fenêtre d’affichage le plus petit (= à vh si vh < vw, ou = à vw si vw < vh) |
| vmax | Relatif au côté de la fenêtre d’affichage le plus grand (= à vh si vh > vw, ou = à vw si vw > vh) |
| ch | Se base sur la largeur du caractère ‘0’ |
Conclusion : quelle unité de dimensionnement choisir ?
Nous avons fait un comparatif des principales unités de mesure, mais quelles sont celles à privilégier ?
Il n’y a pas forcément de bonne réponse à cette question, mais pour vous aider à faire un choix, il y a quelques règles :
- n’utiliser em que lorsqu’on doit définir une taille (une font-size, surtout) en fonction de son parent ;
- utiliser rem dès lors que c’est possible, pour avoir une cohérence globale des tailles ;
- utiliser le % pour les imbrications un peu plus complexes ;
- choisir les vh/vw lorsqu’on veut qu’un élément dépende de la taille du navigateur complet.
En respectant ces principes, il sera plus facile de garder un code CSS clair, propre et maintenable.
