Les unités de mesure en CSS

• Apprendre les types les plus courants de valeurs des propriétés des CSS et leurs unités associées.

• La spécification de certaines valeurs en CSS nécessite l’utilisation d’un certain nombre d’unités de mesure. Cette notion est importante pour que l’on ne s’y perde pas nous-mêmes dans nos spécifications.
• Il y a plusieurs façons d’indiquer des valeurs en CSS et en fonction de celles-ci, on utilise différentes unités de mesure. Pour spécifier une valeur en CSS on l’exprime parfois juste avec des termes en anglais.

• Les unités relatives sont appelées ainsi car elles ne représentent pas une longueur prédéfinie mais une longueur relative à une référence.
Unité
Définition
%
Représente une valeur en pourcentage. La référence peut être le parent,l’élément lui même ou tout autre valeur.
em
• Représente une proportion de la taille de la police courante.
• L’unité em se rapporte à la taille de la police.
• Avec elle on peut affecter une mesure relative à la taille de police de l’élément parent.
• Elle permet d’avoir des feuilles de style plus facilement adaptables d’un média à un autre.
• Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point.
• Cette valeur em est utilisable pour d’autres propriétés acceptant la mention de longueur.
ex
• Représente la hauteur du glyphe ‘x’ (ou équivalent) dans la police courante
• L’unité ex est utilisée souvent pour exprimer la hauteur des caractères.
• Le point de référence est la hauteur des minuscules souvent appelée hauteur “x” lowercase.
• En d’autres termes, dans le cas où la taille est donnée avec une unité “ex”, celle-ci est alors mesurée par rapport à la hauteur de la minuscule x de l’élément parent.
ch
Représente la dimension du glyphe ‘0’
rem
Représente la taille de la police de l’élément html.
fr
Représente une fraction de l’espace restant.
dpi
Représente la résolution du périphérique.
vw
Représente la largeur du viewport du périphérique.
vh
Représente la hauteur du viewport.
vm
Représente la plus petite valeur du viewport (largeur ou hauteur).

Les unités absolues

• Ces unités sont applicables sur toutes les propriétés nécessitant une valeur correspondant à une distance.
• Elles sont cependant totalement dépendantes de la résolution du média sur lequel on visualise la page, il faudra donc être vigilant quant à l’utilisation des unités absolues
Unité
Définition
cm
centimètre
mm
millimètre
in
pouce, c’est environ 2,54 cm
px
pixel, initialement 1 px est égal à 1/96 ^{ème de pouce}
pt
point, initialement 1 pt est égal à 1/72 ^{ème de pouce}
pc
pica, 1 pc est égal 12 pt

Les unités d’angles

• Nous les utiliserons notamment pour définir des transformations.
• Notons la présence de l’unité turn, très utile pour définir des cycles de rotations, son implémentation est bientôt complète, Mozilla
  l’ayant ajoutée à Firefox 13
Unité
Définition
deg
degré, 1 tour = 360 deg
grad
grade, 1 tour = 400 grad
rad
radian, 1 tour = 2π =6,28 rad
turn
tour, 0,5 tour = 180 deg

Les unités de temps

• Nous les utiliserons pour les transitions et les animations (tableau 2.18) mais sachez qu’elles sont aussi utiles pour les media de type audio (media speech).
Unité
Définition
s
seconde
ms
milliseconde,1 000 ms = 1s