Syntaxe de définition des valeurs

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

Les types de composants

Les mots-clés

Les mots-clés génériques

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

inherit, initial et unset

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

Les littéraux

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

Les types de donnée

Les types de donnée simples

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : <angle>, <string>, et ainsi de suite).

Les types de donnée non terminaux

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

Les types de donnée non terminaux sont de deux sortes :

  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.

Les combinateurs

Les crochets

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

bold [ thin && <length> ]

Cet exemple pourra illustrer les valeurs suivantes :

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

Mais ne correspondra pas à :

  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.

Juxtaposition

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

bold <length> , thin

Cet exemple pourra illustrer les valeurs suivantes :

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

Mais il ne correspondra pas à :

  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type <length>

Double esperluette

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

bold && <length>

Cet exemple pourra illustrer les valeurs suivantes :

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

Mais il ne correspondra pas à :

  • bold car les deux composants doivent apparaître.
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.

Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.

Double barre

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

<'border-width'> || <'border-style'> || <'border-color'>

Cet exemple pourra illustrer les valeurs suivantes :

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

Mais il ne correspondra pas à :

  • blue yellow car le composant doit apparaître au plus une fois.
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.

Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.

La barre verticale

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

<percentage> | <length> | left | center | right | top | bottom

Cet exemple pourra illustrer les valeurs suivantes :

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

Mais il ne correspondra pas à :

  • center 3% car seul un seul des composants doit être présent.
  • 3em 4.5em car un composant doit être présent au plus une seule fois.

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

Les multiplicateurs

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

L'astérisque (*)

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

bold smaller*

Cet exemple pourra illustrer les valeurs suivantes :

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller and so on.

Mais il ne correspondra pas à :

  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.

Plus (+)

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

bold smaller+

Cet exemple pourra illustrer les valeurs suivantes :

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller and so on.

Mais il ne correspondra pas à :

  • bold car smaller doit apparaître au moins une fois
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.

Le point d'interrogation (?)

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

bold smaller?

Cet exemple pourra illustrer les valeurs suivantes :

  • bold
  • bold smaller

Mais il ne correspondra pas à :

  • bold smaller smaller car smaller doit apparaître au plus une fois
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.

Les accolades ({ })

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

bold smaller{1,3}

Cet exemple pourra illustrer les valeurs suivantes :

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

Mais il ne correspondra pas à :

  • bold car smaller doit apparaître au moins une fois.
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.

Dièse (#)

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

bold smaller#

Cet exemple pourra illustrer les valeurs suivantes :

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller and so on.

Mais il ne correspondra pas à :

  • bold car smaller doit apparaître au moins une fois.
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.

Point d'exclamation (!)

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

[ bold? smaller? ]!

Cet exemple correspondra aux valeurs suivantes :

  • bold
  • smaller
  • bold smaller

Mais pas à :

  • ni bold ni smaller, car il faut au moins l'un des deux.
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.

Récapitulatif

Signe Nom Description Exemple
Combinateurs
Juxtaposition Les composants sont obligatoires et doivent apparaître dans cet ordre. solid <length>
&& Double esperluette Les composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre. <length> && <string>
|| Double barre Au moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre. <'border-image-outset'> || <'border-image-slice'>
| Barre simple Un et un seul des composants doit être présent. smaller | small | normal | big | bigger
[ ] Crochets Les composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes. bold [ thin && <length> ]
Multiplicateurs
Aucun multiplicateur Exactement 1 fois. solid
* Astérisque 0 ou plus. bold smaller*
+ Signe plus 1 ou plus. bold smaller+
? Point d'interrogation 0 ou 1 fois (autrement dit, la valeur est optionnelle) bold smaller?
{A,B} Accolades Au moins A fois et au plus B fois. bold smaller{1,3}
# Dièse 1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule. bold smaller#

Spécifications

Specification
CSS Values and Units Module Level 4
# value-defs