Temps de lecture approximative : 5 minutes
Il existe de nombreuses propriétés qui acceptent comme valeur, des nombres avec des unités. Nous l'avons notamment abordé avec la largeur et la hauteur d'un élément que nous avons exprimées en px. Le CSS offre de nombreuses unités pour exprimer les dimensions d'un élément.
Un espace ne peut être intégré entre le chiffre (ou le nombre) et l'unité. Cependant, si la valeur est à 0, l'unité peut être omise. Pour certaines propriétés CSS, les longueurs négatives sont autorisées. En somme, on classe les unités en deux grandes catégories : absolue et relative.
De nombreuses propriétés et unités acceptent des valeurs décimales. Il est impératif d'utiliser le . (point) comme séparateur décimal, et non une , (virgule).
Les unités absolues ne sont pas recommandées à l'écran, car les tailles d'écran varient énormément. Avec l'avénement des smartphones et des tablettes, les tailles de supports se démultiplient. On est très loin des trois grandes résolutions d'écrans qui ont régné pendant un moment : 800x600, 1024x768 et 1280x1080. Cependant, elles peuvent être utilisées si le support de sortie est connu, comme pour la mise en page d'impression. Oui, le CSS permet également de mettre en forme une page en vue d'une impression. Ci-après la liste des unités absolues en CSS.
| Unité | Description |
|---|---|
cm |
Centimètre |
mm |
Millimètre |
in |
Pouce (inch), 1in = 2.54cm = 96px |
pt |
Point, 1pt = 1/72in |
pc |
Picas, 1pc = 12pt |
Au final, on peut déterminer cette règle : 1in = 2.54cm = 25.4mm = 72pt = 12pc = 96px.
Les unités relatives se réfèrent toujours à un autre élément. Elles sont très utiles, notamment avec la multiplication des supports et pour gérer le responsive design.
| Unité | Description |
|---|---|
% |
Relatif à la taille de l'élément parent |
em |
Relatif à la taille de police de l'élément et tient compte de l'héritage |
rem |
Relatif à la taille de police de l'élément racine de la page et ne tient pas compte de l'héritage |
Il y a également une unité magique : le pixel. Elle est très utilisée en CSS. L'unité pixel est définie pour être petite mais visible, et de telle façon qu'une bordure de 1px soit affichée de façon nette et sans bavure. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage. Nous l'utiliserons pour nos tests et notre apprentissage.