Quelles mesures CSS, pour quel usage ?
Par Dudley Storey
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.
http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When