Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les unités en CSS

Syntaxe pour les unités CSS.

La plupart des valeurs nécessitent que l'unité soit précisée. Ne pas le faire rend la plupart du temps la règle invalide. Il n'y a que lorsque la valeur vaut 0 qu'on peut se dispenser de préciser l'unité.

L'unité s'inscrit à la suite de la valeur numérique, sans espace :
Exemples : 12px, 45deg, etc.

Table des matières.

Unités de dimension absolues.

Ces unités sont utilisables pour tout ce qui traduit une dimension : largeur et hauteur d'un bloc, marges, taille des caractères, etc.

Ce sont des unités absolues en ce sens que la valeur n'est pas calculée par rapport à une autre dimension.

px
Pixel. Un pixel vaut environ 1/96ème de pouce mais cela peut être variable d'un écran à l'autre.
Sur les mobiles et certains écrans haute définition, un pixel peut correspondre à plusieurs points physiques de écran.
pt
Point. Un point = 1/72ème de pouce.
pc
Pica. Un pica vaut 1/6ème de pouce, soit 12 points.
Le pica est une unité originaire de l'imprimerie. Il est de nos jours peu utilisé.
in
Inch. Un pouce vaut 2,54 cm.
in est l'abréviation de inch, pouce en anglais.
cm
mm
Centimètre et Millimètre font partie du Système International d'unités (SI). Ces deux unités sont très largement utilisées dans le monde entier. Néanmoins elles ne sont pas très pratiques pour définir des dimensions sur un écran : on les réservera aux dimensions des pages imprimées.
Q
Un Q vaut 1/40 cm. Cette unité est peu utilisée. Elle n'est d'ailleurs pas reconnue par tous les navigateurs.

Unités de dimension relatives.

Ces unités provoquent un calcul à partir d'une autre dimension. Par exemple, une marge de 25% mesure le quart de la dimension de l'élément.

Les unités relatives sont de plus en plus employées pour créer des mises en page qui s'adaptent à des tailles d'écran de plus en plus diverses (depuis l'écran d'un téléphone mobile jusqu'à l'écran de télévision). Le terme "responsive" désigne une mise en page parfaitement adaptable à la taille de l'écran.

%
Les pourcentages sont calculés par rapport à une autre dimension, soit de l'élément lui-même, soit de l'élément parent, etc. Suivant la propriété, cette autre dimension peut être la largeur, la hauteur de ligne, etc.
fr
(fraction). Cette unité est réservée au dimensionnement des largeurs des colonne ou des hauteurs de ligne dans une grille. C'est une unité relative à la place restante.

Les éléments dimensionnés en fr se répartissent la place restante dans le conteneur grille en fonction de leur valeur de fr.

Sur l'exemple ci-dessous observez que les deux dernières colonnes occupent bien tout l'espace restant à droite de la première colonne, et que la colonne 3 est toujours deux fois plus large que la colonne 2.

largeur = 100px
largeur = 1fr
largeur = 2fr

 

Unités de dimension relatives au viewport.

vw (Viewport Width)= 1/100 de la largeur du viewport.
vh (Viewport Height) = 1/100 de la hauteur du viewport.
vi (Viewport Inline) = 1/100 de la dimension du Viewport dans la direction des lignes (inline axis) de l'élément racine.
vb (Viewport Block) = 1/100 de la dimension du viewport dans la direction des blocs (block axis) de l'élément racine.

Le viewport est la partie disponible de l'écran pour afficher le document ou la page HTML. Il exclu donc les barres de défilement, les barres d'outils du navigateur, les fenêtres optionnelles comme la console, etc.

Observez que les dimensions du bloc bleu ci-dessous sont bien proportionnelles aux dimensions de l'écran en faisant varier la largeur et la hauteur de la fenêtre du navigateur (si vous consultez cette page sur un ordinateur de bureau).

width:25vw;
height:10vh;
vmin (Viewport min) = 1/100 de la plus petite des dimensions du viewport.
vmax (Viewport max) = 1/100 de la plus grande des dimensions du viewport.

Dans le cas d'un écran horizontal comme un écran d'ordinateur de bureau, vmin correspondra donc à la hauteur du viewport, mais pour une téléphone portable vmin sera la largeur.

Nouvelles unités relative au viewport.

lvw, svw, dvw
lvh, svh, dvh
lvi, svi, dvi
lvb, svb, dvb
Large Viewport Width - Small Viewport Width - Dynamic Viewport Width
Large Viewport Height - Small Viewport Height - Dynamic Viewport Height
Large Viewport Inline - Small Viewport Inline - Dynamic Viewport Inline
Large Viewport Block - Small Viewport Block - Dynamic Viewport Block

Pourquoi avoir introduit ces nuances ? Parce que les navigateurs peuvent afficher ou masquer certains éléments pour donner le plus de place possible à la page. C'est particulièrement le cas sur les mobiles : la barre d'adresse, les barres de défilement, etc. ne sont affichées que lorsqu'elles sont utiles.

Cette gestion dynamique de l'affichage peut impacter la taille des éléments définie par rapport au viewport, ce qui nécessite à chaque fois de recalculer la mise en page. Ces unités ont été créées pour éviter cela.

les unités qui commencent par l (large) font référence à la dimension du viewport la plus grande possible, lorsque tous les éléments optionnels sont masqués. Les éléments dont les dimensions sont définies avec ces unités peuvent être légèrement masqués lorsqu'un accessoire s'affiche.

A l'inverse, celles qui commencent par s (small) font référence à la dimension du viewport la plus petite, lorsque tous les éléments optionnels sont affichés. Les éléments dont les dimensions sont définies avec ces unités ne seront jamais masqués quelque soit les accessoires que le navigateur peut faire apparaître, mais lorsque ces éléments disparaissent l'occupation de la place disponible est moins bonne.

Enfin, celles qui commencent par d (dynamic) font référence à la dimension actuelle du viewport. Les dimensions définies avec ces unités évoluent donc en fonction des éléments qui s'affichent ou se masquent. Ces unités ne présentent aucun des inconvénients cités plus haut mais nécessitent de recalculer la mise en page chaque fois qu'un élément s'affiche ou se masque.

Les éléments ci-dessous ont leur hauteur définie dans chacune des unités. La différence est peu importante, et sera sans doute invisible sur un écran d'ordinateur car peu d'éléments visuels sont optionnels (la barre d'adresse et toujours affichée par exemple). Mais sur un mobile, le bloc défini en svh doit être légèrement moins haut que les autres.
En faisant apparaître la barre d'adresse (en faisant légèrement défiler l'écran), seul le bloc défini en dvh doit changer de hauteur.

Les unités non spécifiques comme vw, vh, vi et vb sont équivalentes respectivement à lvw. lvh, lvi et lvb.

lvh
svh
dvh
vh

Unités de dimension relatives à la taille des caractères.

em
rem
Unité relative à la taille des caractères de l'élément parent.
Unité relative à la taille des caractères de l'élément racine.

Définir toutes les tailles de caractères en em ou en rem est une bonne solution pour changer dynamiquement la taille des caractères (fonction loupe) car il suffit alors de changer la taille des caractères de l'élément racine pour que la taille de tous les caractères de la page soient mise à jour.
L'élément racine peut être désigné soit par le sélecteur html soit par la pseudo-classe :root.

Unité CSS em = hauteur des caractères
ex
rx
Unité relative à la hauteur des caractères x minuscule de l'élément parent.
Unité relative à la hauteur des caractères x minuscule de l'élément racine.

Unité CSS ex = hauteur de la lettre x minuscule

cap
rcap
Unité relative à la hauteur des lettres capitales de l'élément lui-même.
Unité relative à la hauteur des lettres capitales de l'élément racine.
Unité CSS ex = hauteur des capitales
lh
rlh
Unité relative à la hauteur d'une ligne de texte de l'élément lui-même.
Unité relative à la hauteur d'une ligne de texte de l'élément racine.

Unité CSS lh = hauteur de ligne

ch
rch
Unité relative à la largeur du 0 de l'élément lui-même.
Unité relative à la largeur du 0 de l'élément racine.

Unités relatives à la largeur du chiffre zéro (0).
Cette unité peut être utilisée par exemple pour définir la largeur d'une zone de saisie. En affichant le code CSS, vous remarquerez que nous avons ajouté 8 pixels, qui correspondent à l'épaisseur des bordures et des marges intérieures (padding).

Code postal :

 

ic
ric
Unité relative à la largeur du caractère 水 dans la police de l'élément lui-même.
Unité relative à la largeur du caractère 水 dans la police de l'élément racine.

Cette unité est bien entendu utilisée surtout pour des textes en langue CJK.

Unités de dimension utilisables dans les container queries.

Les container queries permettent de définir des styles conditionnels en fonction des dimensions d'un élément conteneur. Reportez vous à la page @container pour une présentation détaillée des container queries.

cqw
1% de la largeur du conteneur.
cqh
1% de la hauteur du conteneur.
cqi
1% de la dimension du conteneur dans la direction des lignes.
cqb
1% de la dimension du conteneur dans la direction de blocs.
cqmin
1% de la dimension du conteneur la plus petite entre cqi et cqb.
cqmax
1% de la largeur du conteneur la plus grande entre cqi et cqb.

Unités d'angle.

Les unités d'angles sont surtout utilisées pour les transformations, mais quelques autres propriétés acceptent des valeurs angulaires. Par exemple font-style pour définir l'inclinaison des caractères, les fonctions de dégradé linéaire, les fonctions de rotation de la teinte des couleurs, etc.

deg
Degré : unité angulaire classique : 90 degrés est un angle droit, 360 degrés correspond à un tour complet.
grad
Grade : autre unité angulaire : 100 degrés est un angle droit, 400 degrés est un tour complet.
rad
Radian : cette unité angulaire est très utilisée en mathématique. Elle est définie par rapport au nombre pi (3.1416...)
pi / 2 (soit 1.57rad) est un angle droit.
2 pi (soit 6.28 rad) correspond à un tour complet.
turn
Tour : 1turn correspond à un tour complet. Donc 0.25turn est un angle de 90 degrés.

Unités de résolution.

Ces unités de résolution sont utilisées par les media-queries. Reportez vous à la directive @media pour plus de précisions.

dpi
Dot Per Inch : unité de résolution. 1dpi est un point par pouce.
dpcm
Dot Per cm : points par centimètre.
dppx
Dot Per pixel) : points par pixel. 1dppx = 96dpi.

Unités de durée.

Ces unités sont surtout utilisées pour définir la durée des animations ou des transitions.

s
Seconde.
ms
Milliseconde.

Unités de fréquence.

Ces unités sont utilisées principalement pour la restitution sonore.

hz
Hertz. Le nombre de hertz correspond au nombre de vibrations par seconde. S'il s'agit d'un son, il sera d'autant plus aigu que le nombre de hertz sera grand. La voix humaine se situe entre 200hz et 450hz.
khz
Kilo-Hertz : 1khz est bien sûr égal à 1000 hertz.
st ⚠
Semi-Tone. 1st est égal à un demi-ton, en se référant à la gamme musicale classique : 1st correspond à l'écart de fréquence entre par exemple DO et DO#.

Unité de volume sonore.

Unité utilisée pour la restitution sonore.

dB ⚠
DéciBel. Le décibel est une unité logarithmique utilisée pour mesurer le ratio entre deux intensités sonores. Si s1 et s2 sont deux intensités sonores, leur ratio en décibels se calcule de la façon suivante :
ratio = 10 x log10 (s1 / s2)
Cette unité est trompeuse du fait qu'elle est logarithmique. Par exemple un doublement de l'intensité sonore correspond seulement à 3dB.