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 et initial

Toutes propriétés CSS acceptent les mots-clés inherit et initial 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.

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

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.

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.

Récapitulatif

Spécifications