Les unités de mesure

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.

Parfois il est jugé utile d'employer des valeurs numériques pour être plus précis. En général, les propriétés en CSS prennent le plus souvent un des cinq types de valeurs suivantes :

  • Mots-clés : Par exemple : bold
  • Valeurs en pourcentage : % (par exemple 50%)
  • Couleurs : #RRVVBB, #RVB, rgb, mot clé (par exemple #D9BB7A, #C9B, red)
  • URL : Par exemple : http://www.google.com
  • Valeurs de longueur : Par exemple : 1cm

Dans ce chapitre, nous allons nous intéresser surtout aux valeurs de longueur. Quant aux autres valeurs, on va en parler très prochainement dans les tutoriels suivants. Il faut tout simplement les noter quelque part pour l'instant.

Les valeurs de longueur

Les valeurs de longueur sont données en valeur numérique. Pour cela, il y a deux sortes d'unités :

  • unités absolues : in, mm, cm, pt, pc
  • unités relatives : em, ex, px

Les unités de longueur absolues

Les unités absolues ont un certain rapport entre elles comme l'indiquent les valeurs suivantes :

  • cm ( centimeter = 1cm = 10 mm )
  • in ( inche = 1in = 2.54 cm )
  • mm ( millimeter )
  • pc ( pica = 1pc = 12pt )
  • pt ( point = 1pt = 1/72 in )

Par contre, elles n'ont pas de rapport avec le contexte, avec le reste du document. Nous allons voir maintenant les unités de longueur relatives

L'unité em

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.

L'unité ex

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.

Tout comme l'unité em, cette unité est utilisée pour toutes les propriétés acceptant la mention de longueur. Toutefois, la plupart des navigateurs ont encore une certaine hésitation à traduire correctement cette valeur.

L'unité px

L'écran d'un ordinateur ou moniteur est formé par plusieurs petits "carrés". Ces carrés définissent la résolution ou densité de l'écran en pixels d'affichage selon l'unité de sortie, c'est-à-dire l'écran de l'ordinateur. L'unité px qui veut dire pixel correspond à un de ces petits carrés.

C'est en fait le plus petit élément de la résolution d'écran. Cette unité peut être utilisée pour toutes les propriétés acceptant les mentions de longueur.

Une question ? Venez la poser sur notre forum développement web !

A propos de l'auteur

Nicolas Galle

Nicolas Galle est développeur web sénior pour l'agence Aseox.

Newsletter Marketing