syntax

Syntaxe

/* Un de type de donnée */
syntax: "<color>";

/* Un combinateur '|' pour plusieurs types de données */
syntax: "<length> | <percentage>";

/* Liste de valeurs séparées par des espaces */
syntax: "<color>+";

/* Liste de valeurs séparées par des virgules */
syntax: "<length>#";

/* Mots-clés */
syntax: "small | medium | large";

/* Combinaison de type de donnée et de mot-clé */
syntax: "<length> | auto";

/* Valeur de syntaxe universelle */
syntax: "*";

Valeurs

Une chaîne de caractères (appelée chaîne de syntaxe) qui définit les valeurs autorisées. Elle peut être :

• Un ou plusieurs noms de composants de syntaxe, qui peuvent être :
  • Des noms de types de données (écrits entre chevrons, comme <color> ou <length>)
  • Des mots-clés (écrits sans chevrons, comme auto ou none)
• La syntaxe universelle *, qui accepte toute valeur CSS valide. Elle ne peut pas être multipliée ni combinée avec d'autres composants de syntaxe.

Les noms de composants de syntaxe peuvent être utilisés seuls ou multipliés et combinés de différentes façons :

• Les multiplicateurs + (séparé par des espaces) et # (séparé par des virgules) indiquent qu'une liste de valeurs est attendue. Par exemple, <color># signifie qu'une liste de valeurs <color> séparées par des virgules est attendue.

• Le combinateur barre verticale (|) permet de créer des conditions « ou » pour la syntaxe attendue. Par exemple, <length> | auto accepte <length> ou auto, et <color># | <integer># attend une liste de valeurs <color> ou une liste de valeurs <integer>, toutes deux séparées par des virgules.

Les noms de composants de syntaxe suivants sont pris en charge :

"<angle>"

Accepte toute valeur <angle> valide.

"<color>"

Accepte toute valeur <color> valide.

"<custom-ident>"

Accepte toute valeur <custom-ident> valide.

"<image>"

Accepte toute valeur <image> valide.

"<integer>"

Accepte toute valeur <integer> valide.

"<length>"

Accepte toute valeur <length> valide.

"<length-percentage>"

Accepte toute valeur <length> ou <percentage> valide, ainsi que toute expression calc() combinant des valeurs <length> et <percentage>.

"<number>"

Accepte toute valeur <number> valide.

"<percentage>"

Accepte toute valeur <percentage> valide.

"<resolution>"

Accepte toute valeur <resolution> valide.

"<string>"

Accepte toute valeur <string> valide.

"<time>"

Accepte toute valeur <time> valide.

"<transform-function>"

Accepte toute valeur <transform-function> valide.

"<transform-list>"

Accepte une liste de valeurs <transform-function> valides. Équivalent à "<transform-function>+".

"<url>"

Accepte toute valeur <url> valide.

Définition formelle

Syntaxe formelle

syntax = 
  <string>  

Exemples

Enregistrer une propriété personnalisée avec vérification de type

Cet exemple montre comment définir une propriété personnalisée --my-color qui n'accepte que des valeurs <color> :

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

En utilisant JavaScript CSS.registerProperty() :

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Spécifications

Compatibilité des navigateurs

Voir aussi

• Autres descripteurs de @property : inherits et initial-value
• API Propriétés et valeurs CSS
• API Peinture CSS
• API Typage de modèle d'objet CSS
• API Houdini