CSS

Les unités de mesure en CSS

Un cours complet pour maîtriser Les unités de mesure en CSS.

0 chapitres 0 QCM Accès gratuit

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.
Introduction
- 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 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).

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

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
s	seconde
ms	milliseconde, 1 000 ms = 1s