Valeurs et unités CSS

• <custom-ident>
• Des mots-clés prédéfinis tels que les identifiants (<ident>)
• <string>
• <url>()

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

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;
}

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

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.

• <integer>
• <number>
• <dimension>
• <percentage>

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

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

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 :

• <length> (longueurs avec des unités de distance)
• <angle>
• <time>
• <frequency>
• <resolution>

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

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.

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és temporelles

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

Unités de fréquence

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

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.

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%;
}

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 :

• <frequency-percentage>
• <angle-percentage>
• <time-percentage>

• <color>
• <image>
• <position>

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.

• calc()
• min()
• max()
• clamp()
• toggle()
• attr()

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.

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.

• Les types de donnée de base en CSS
• Introduction à CSS : les valeurs et les unités