Quelles mesures CSS, pour quel usage ?

Par Dudley Storey

Confrontés au foisonnement des systèmes de mesure CSS, les développeurs web peuvent avoir du mal à comprendre quelles unités il faut utiliser dans leurs pages, et à quel moment. On peut être tenté de toujours utiliser les mêmes mesures, mais ce choix risque de limiter sérieusement l’aboutissement de vos designs. Je propose ci-dessous une liste de suggestions, mais non pas de règles absolues : libre à vous de vous en écarter si vous le jugez préférable.

Les pixels (px)

À choisir pour : les traits de bordure et les éléments généraux, lorsqu’il s’agit de designs à largeur fixe ; également pour les valeurs des décalages des ombres portées en CSS. À éviter pour les points d’arrêt dans @media car cela casse la mise en page en cas de zoom : mieux vaut employer rem ou em.
À éviter pour : la typographie, sauf s’il s’agit d’établir une taille de police de base dans un « reset CSS » (remise à zéro des styles, NdT).

Les pourcentages (%)

À choisir pour : intégrer des images et des conteneurs à taille variable ; et pour définir la hauteur de la balise body dans certains cas.
À éviter pour : la typographie. (Exception : la taille de police pour un reset CSS).

em et ex

À choisir pour : la typographie, et les éléments qui y sont liés (les marges, par exemple), mais sans perdre de vue que em et ex peuvent être très délicats à employer dans des mises en page complexes. L’unité alternative rem est plus appropriée dans ces cas-là.

Les points et les picas

À choisir pour : les feuilles de style d’impression.
À éviter pour : tout le reste.

rem

À choisir si : vous voulez une alternative plus solide et fiable aux solutions avec em ou ex, et pour les mêmes usages, y compris les points d’arrêt dans les requêtes de médias.
À éviter si : vous devez prendre en charge IE8 et les versions antérieures. Sinon, utilisez cette unité mais prévoyez une solution de repli (en fournissant une alternative dans une unité plus courante avant la valeur en rem) ou encore un « polyfill » (c’est-à-dire un script effectuant le calcul dans les navigateurs ne comprenant pas cette unité, NdT).

Unités relatives à la surface d’affichage (vh et vw)

À choisir pour : la typographie réactive ; et pour des conteneurs réactifs « parfaits ».
Difficile de savoir pour quel usage il faudrait éviter ces unités, car vh et vw sont très récents et encore loin d’avoir été totalement exploités en design web. Attention toutefois à l’absence de prise en charge sous IE8 : prévoyez donc des solutions de repli.

Les pouces (in) et les centimètres (cm)

À choisir dans : les feuilles de style d’impression, et en particulier pour les marges des pages.
À éviter pour : tout le reste.

Les caractères (ch)

À choisir pour : dimensionner et positionner les polices à espacement constant. Attention, le support navigateur est incomplet.

Grille de texte (gd)

De préférence pour : des mises en page expérimentales, car c’est une unité qui n’est prise en charge que par IE10+ au moment où j’écris ces lignes. Des substituts de type « polyfill » commencent néanmoins à apparaître.

Nombres bruts

Bien que presque toutes les propriétés CSS exigent que l’unité de mesure soit indiquée dans la déclaration, pour quelques-unes d’entre elles il est préférable de n’employer que des valeurs d’entiers ou à virgule flottante. En particulier, les propriétés line-height (hauteur de ligne) et border-image (image de bordure) sont plutôt à spécifier à l’aide de nombres bruts.

Fiche technique

À propos de l'auteur

Dudley Storey est un enseignant, écrivain, designer, artisan et cycliste avéré habitant au Canada, à Calgary. Sa passion est de développer pour le Web et le Mobile, passion qu’il enseigne depuis quinze ans. Il est l’auteur de « Pro CSS3 Animation » (Apress, 2013). Ses textes apparaissent également dans plusieurs endroits sur le Web.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site