Informatique


Les unités en CSS

Aller à

Généralités

CSS permet de choisir parmi un large éventail.

Les unités de longueur sont divisées en deux groupes, les unités absolues et les unités relatives (mesurées par rapport à une valeur supérieure - elles peuvent donc être négatives) - voir les tableaux ci-dessous.

Il est conseillé de se cantonner aux unités % et rem pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près... Les autres valeurs doivent être le plus souvent évitées.


Unités absolues

cm centimètre Valeur en centimètres. Risque d'affichage différent sur plusieurs écrans. En effet, les réglages et résolutions sont tellement variés que ce qui semble correspondre à 1 cm sur un écran donné pourra être beaucoup plus grand ou plus petit sur un autre.
mm millimètre Valeur en millimètres. Même remarque que pour les centimètres.
in pouce (2.54 cm) Valeur en pouces (inches). Même remarque que pour les centimètres.
pt point Valeur en point. Le point est une mesure typographique utilisée par les imprimeurs (d'où les "points par pouce" de certaines résolutions) et les traitements de texte. Ici encore, les remarques des centimètres s'appliquent.
pc pica
(12 pt)
Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier", les remarques précédentes tiennent.

Unités relatives

em Valeur par rapport à la hauteur em d'une police. 1 em correspond à 100% de la taille en cours de la police, 1.2 em à 120 %, 0.8 em à 80%… Son usage est donc limité aux polices.
ex Valeur par rapport à la hauteur x d'une police. Assez pauvrement implémentée, donc à éviter.
px Valeur en pixels. La définition d'un pixel étant "96 pixels/pouce", le pixel n'est pas forcément recommandé dans tous les cas (cf. les remarques précédentes).
% Valeur en pourcentage. L'élément définit prendra un pourcentage donné de la taille de son élément parent.
rem
(root em)
Contrairement au em, qui peut être différent pour chaque élément, le rem est constant tout au long du document.
vw
(vieuwport width)
Il s'agit du centième de la largeur de la fenêtre dans laquelle s'ouvre la page.
vh
(vieuwport height)
Il s'agit du centième de la hauteur de la fenêtre dans laquelle s'ouvre la page.