Valeurs et unités CSS

Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification CSS Values and Units (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.

Types de données textuels

Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<ident>) ou une chaîne de caractères (<string>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<string>) doivent être délimitées par des quotes ou des doubles quotes.

Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme <custom-ident> ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété grid-area, on peut utiliser une valeur de type <custom-ident> et si on a une zone de grille nommée content, on l'indiquera sans quotes :

.item {
  grid-area: content;
}

En revanche, lorsqu'on manipule une valeur de type <string>, comme ça peut être le cas lorsqu'on utilise la propriété content, il faut l'entourer de quotes :

.item::after {
  content: "Voici le contenu.";
}

Si le type indiqué dans la spécification est <custom-ident> | <string>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :

@keyframe identifiantValide {
  /* on place les keyframes ici */
}

@keyframe 'chaineValide' {
  /* on place les keyframes ici */
}

Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être none, unset, initial ou inherit, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages <custom-ident> et <string>.

Mots-clés prédéfinis

Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.

Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété break-inside.

auto | avoid | avoid-page | avoid-column | avoid-region

Dans une déclaration, on pourra donc écrire (sans quote) :

.box {
  break-inside: avoid;
}

Mots-clés généraux

En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : initial, inherit et unset.

Le mot-clé initial représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé inherit correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.

Le mot-clé unset agit comme inherit ou initial selon que la propriété soit héritée ou non.

Une quatrième valeur, revert, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).

URL

Une valeur de type <url> s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <string>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.

.box { 
  background-image: url("images/mon-arriere-plan.png"); 
} 

.box {
  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
} 

On notera que la valeur passée à url() peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <url-token> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page <url> pour plus d'informations.

Types de données numériques

Entiers

Un entier (<integer>) se compose d'un ou plusieurs chiffres entre 0 et 9 (exemple de valeurs : 1024 ou -55). Un entier peut être précédé d'un signe + ou -.

Nombres

Un nombre (<number>) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, 1 et 1.2 sont des nombres en CSS. Les nombres peuvent être précédés d'un signe + ou -.

Dimensions

Une valeur <dimension> est un nombre (<number>) suivi directement d'une unité (par exemple 10px). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (1 cm ne sera pas valide). CSS utilise les dimensions pour les types suivants :

Nous verrons chacun de ces types dans les sections suivantes.

Unités de distance

Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type <length>. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.

Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

Récapitulatif des unités relatives
Unité Relative à
em La taille (corps) de police de l'élément
ex La hauteur d'un x avec la police utilisée par l'élément
cap La hauteur d'une majuscule nominale avec la police utilisée par l'élément
ch La largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).
ic La largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).
rem La taille (corps) de police de l'élément racine
lh La hauteur de la ligne de l'élément
rlh La hauteur de la ligne de l'élément racine
vw 1% de la largeur de la zone d'affichage (viewport)
vh 1% de la hauteur de la zone d'affichage (viewport)
vi 1% de la taille de la zone d'affichage sur l'axe en ligne (inline axis)
vb 1% de la taille de la zone d'affichage sur l'axe de bloc (block axis)
vmin 1% de la zone d'affichage selon sa plus petite dimension
vmax 1% de la zone d'affichage selon sa plus grande dimension

Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité cm correspond à un centimètre physique.

Récapitulatif des unités de longueur absolue
Unité Nom Équivalence
cm Centimètre 1cm = 96px/2.54
mm Millimètre 1mm = 1/10e de 1cm
Q Quart de millimètre 1Q = 1/40e de 1cm
in Pouces (inches) 1in = 2.54cm = 96px
pc Picas 1pc = 1/16e de 1in
pt Points 1pt = 1/72e de 1in
px Pixels 1px = 1/96e de 1in

Lorsqu'on utilise une longueur nulle (sa valeur est 0), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.

Unités angulaires

Les valeurs angulaires sont représentées avec le type <angle> et peuvent être décrites avec les unités suivantes :

Unité Nom Description
deg Degrés Un cercle se divise en 360 degrés égaux.
grad Grades/Gradians Un cercle se compose de 400 grades.
rad Radians Un cercle se compose de 2π radians.
turn Tours Un cercle se compose d'un tour.

Unités temporelles

Les valeurs temporelles sont de type <time> et utilisent les unités suivantes.

Unité Nom Description
s Secondes  
ms Millisecondes Un millième de seconde.

Unités de fréquence

Les valeurs de fréquence ont le type <frequency> et utilisent les valeurs suivantes.

Unité Nom Description
Hz Hertz Nombre de fois par seconde.
kHz Kilohertz 1000 Hertz.

Unités de résolution

Les résolutions sont représentées par des valeurs de type <resolution>. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.

Unité Description
dpi Points par pouce.
dpcm Points par centimètre.
dppx, x Points par unité px.

Pourcentages

Une valeur de type <percentage> représente une fraction d'une autre valeur de référence.

Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.

Ainsi, si on utilise width avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :

.box {
  width: 50%;
}

Mélanges entre les pourcentages et les dimensions

Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. <length-percentage>). Voici les différentes unités composites qui existent :

Types de données spéciaux (définis via d'autres spécifications)

Couleur

Une valeur de type <color> permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification CSS Color.

Image

Une valeur de type <image> permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification CSS Image Values and Replaced Content Module.

Position

Le type <position> définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme background-position et est donc spécifié avec le module CSS Backgrounds and Borders.

Notations fonctionnelles (fonctions)

Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.

Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.

Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.

Certaines notations fonctionnelles historiques telles que rgba() utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 4 Brouillon de l'éditeur Ajout des unités vi, vb, ic, cap, lh et rlh.
Ajout des notations fonctionnelles  min(), max() et clamp().
Ajout de  toggle()
CSS Values and Units Module Level 3 Candidat au statut de recommandation Ajout de calc()chremvwvwvmin, vmaxQ
CSS Color Module Level 4 Version de travail Ajout des syntaxes sans virgule pour les fonctions rgb()rgba()hsl() et hsla(). Ajout des valeurs alpha pour  rgb() et hsl(), transformant ainsi rgba() et hsla() en alias respectifs (dépréciés).
Ajout du mot-clé de couleur rebeccapurple.
Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.
Ajout des fonctions hwb()device-cmyk() et color().
CSS Color Module Level 3 Recommendation Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba()hsl() et hsla().
CSS Images Module Level 4 Version de travail

Ajout des notations fonctionnelles element(), image(), image-set(), conic-gradient()

CSS Images Module Level 3 Candidat au statut de recommandation Définition initiale du type image.
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Définition initiale.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,