Les unités de mesure en CSS
Les unités de mesure en CSS
-
Objectifs
- Apprendre les types les plus courants de valeurs des propriétés des CSS et leurs unités associées.
- Permettre aux développeurs web de contrôler précisément la mise en page et l’apparence des éléments HTML sur une page web. Les unités de mesure en CSS permettent de spécifier des dimensions telles que la taille de la police, la largeur, la hauteur, les marges, les espacements et d’autres propriétés visuelles.
- Comprendre comment utiliser les unités de mesure en CSS est essentiel pour créer des designs web réactifs et esthétiques qui s’adaptent à différentes tailles d’écran et dispositifs.
-
Itroduction
- 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.
- En CSS, il existe plusieurs types d’unités de mesure que vous pouvez utiliser pour dimensionner et positionner les éléments de votre page web. Chacune de ces unités a ses propres caractéristiques et est adaptée à des situations spécifiques. Voici une introduction aux unités de mesure les plus couramment utilisées en CSS :
-
Les unités relatives
- 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.
- 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.
- 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.
-
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
-
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 -
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
%
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
ex
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).
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
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
