Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    Syntaxe de définition des valeurs

    Une grammaire formelle, la syntaxe de définition des valeurs CSS, est utilisée pour définir l'ensemble des valeurs valides pour une propriété ou une fonction CSS. En complément de cette syntaxe, l'ensemble des valeurs valides peut être restreint par des contraintes sémantiques (pour qu'un chiffre soit strictement positif, par exemple).

    La syntaxe de définition décrit les valeurs acceptées et les interactions entre elles. Une composante peut être un mot-clé, certains caractères considérés comme littéraux, ou une valeur d'un type de donnée CSS défini ou une autre propriété CSS.

    Types de données des composantes

    Mots-clés

    Mots-clés génériques

    Un mot-clé ayant une signification prédéfinie apparaît littéralement, sans guillemets, par exemple : auto, smaller ou ease-in.

    Les cas particuliers de inherit et initial

    Toutes les propriétés CSS acceptent les mots-clés inherit et initial qui sont définies dans tout CSS. Elle ne sont pas mentionnées dans la définition des valeurs, et sont définies implicitement.

    Les littéraux

    Dans CSS, certains caractères peuvent appaître seuls, comme la barre oblique ('/') ou la virgule (','), et sont utilisés dans la définition d'une propriété pour séparer ses parties. La virgule est couramment utilisée pour séparer les valeurs dans les énumérations, ou les paramètres dans une fonction de type mathématique. La barre oblique sépare couramment les parties d'une valeur qui sont différentes sémantiquement, mais qui ont une syntaxe commune. Typiquement, la barre oblique est parfois utilisée dans les propriétés raccourcies pour séparer les composantes qui sont du même types mais appartiennent à des propriétés différentes.

    Les deux symboles apparaissent littéralement dans une définition de valeur.

    Types de données

    Types de données de base

    Certains types de données sont utilisés dans tout CSS et sont définis une seule fois pour toutes les valeurs dans la spécification. Appelés des types de données de base, ils sont représentés avec leurs noms encadrés par les symboles '<' et '>': <angle>, <string>, …

    Types de données non-finaux

    Des types de données moins communs, appelés types de données non-finaux, sont aussi encadrés par '<' et '>'.

    Les types de données non-finaux sont de deux sortes :

    • les types de données partageant le même nom qu'une propriété, encadré par des guillemets. Dans ce cas le type de données partage le même ensemble de valeurs que la propriété. Ils sont couramment utilisés pour la définition des propriétés raccourcies.
    • les types de données ne partageant pas le même nom qu'une propriété. Ces types de données sont très proches d'un type de données de base. Ils diffèrent d'un type de données de base de par la seule position physique de leur définition : dans ce cas, la définition est généralement très proche de la propriété l'utilisant.

    Combinateurs de composantes de valeurs

    Crochets

    Des crochets encadrent plusieurs entités, composeurs ou multiplicateurs et les transforme en une composante unique. Ils sont utilisés pour grouper les composantes pour outrepasser les règles de priorité.

    bold [ thin && <longueur> ]

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • thin bold 3em puisque bold est juxtaposé avec la composantes définie entre crochets, elle doit apparaître avant celle-ci.

    Juxtaposition

    Placer plusieurs mots-clés, littéraux, ou types de données, à côté les uns des autres, seulement séparés par un ou plusieurs espaces est appelé juxtaposition. Toutes les composantes juxtaposées sont obligatoires et doivent apparaître dans l'ordre exact.

    bold <longueur> , thin
    

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • thin 1em, bold puisque les entités doivent être dans l'ordre exprimé.
    • bold 1em thin puisque les entités sont obligatoires, la virgule littérale doit être présente.
    • bold 0.5ms, thin puisque les valeurs ms ne sont pas une <longueur>.

    Double esperluette

    Séparer deux composantes ou plus par une double esperluette, &&, signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

    bold && <longueur>
    

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • bold puisque les deux composantes doivent apparaître dans la valeur.
    • bold 1em bold puisque les deux composants ne doivent apparaître qu'une fois seulement.
    Note : la juxtaposition a la priorité sur la double esperluette, ce qui signifie que bold thin && <longueur> est équivalente à [ bold thin ] && <longueur>. Elle décrit bold thin <longueur> ou <longueur> bold thin mais pas bold <longueur> thin.

    Double barre

    Séparer deux composantes ou plus par une double barre, ||, signifie que toutes les entités sont optionnelles : au moins une d'entre elles doit être présente, mais elles peuvent apparaître dans n'importe quel ordre. Ceci est typiquement utilisé pour définir les différentes valeurs d'une propriété raccourcie.

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

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • blue yellow puisque une composante doit apparaître au maximum une fois.
    • bold puisque ce n'est pas un mot-clé accepté comme valeur de cette entité.
    Note : la double esperluette a la priorité sur la double barre, ce qui signifie que bold || thin && <longueur> est équivalente à bold || [ thin && <longueur> ]. Elle décrit bold, thin, <longueur>, bold thin, <longueur> bold, ou thin <longueur> bold mais pas bold <longueur> bold thin puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante thin && <longueur>.

    Simple barre

    Séparer deux entités ou plus par une simple barre, |, signifie que toutes les entités sont des options exclusives  seulement une de ces options doit être présente. Ceci est typiquement utilisé pour séparer une liste de mots-clés possibles.

    <pourcentage> | <longueur> | left | center | right | top | bottom

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • center 3% puisque seulement une des composantes doit être présente.
    • 3em 4.5em puisqu'une composante doit être présente au maximum une fois.
    Note : la double barre a la priorité sur la simple barre, ce qui signifie que bold | thin || <longueur> est équivalente à bold | [ thin || <longueur> ]. Elle décrit bold, thin, <longueur>, bold thin, <longueur> bold, ou thin <longueur> bold mais pas bold <longueur> bold thin puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante thin && <longueur>.

    Multiplicateurs de composantes de valeur

    Un multiplicateur est un signe qui indique combien de fois une entité précédente doit être répétée. Sans multiplicateur, une entité doit apparaître seulement une fois.

    Il faut noter que les multiplicateurs ne peuvent pas être additionnés et ont la priorité sur tous les combinateurs.

    Astérisque (*)

    Le multiplicateur astérisqueasterisk indique que l'entité peut apparaître zéro, une ou plusieurs fois.

    bold smaller*

    Cet exemple accepte les valeurs suivantes :

    • bold
    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller et ainsi de suite.

    Mais pas :

    • smaller puisque bold est juxtaposée et doit apparaître avant tout mot-clé final smaller.

    Plus (+)

    Le multiplicateur plus indique qu'une entité peut apparaître une ou plusieurs fois.

    bold smaller+

    Cet exemple accepte les valeurs suivantes :

    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller et ainsi de suite.

    Mais pas :

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

    Point d'interrogation (?)

    Le multiplicateur question indique qu'une entité est optionelle et qu'elle doit apparaître zéro ou une fois.

    bold smaller?

    Cet exemple accepte les valeurs suivantes :

    • bold
    • bold smaller

    Mais pas :

    • bold smaller smaller puisque smaller doit apparaître au maximum une fois.
    • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller.

    Accolades ({ })

    Le multiplicateur accolades, encadre deux entiers séparés par une virgule, A et B, indique que l'entité doit apparaître au moins A fois et au maximum B fois.

    bold smaller{1,3}

    Cet exemple accepte les valeurs suivantes :

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

    Mais pas :

    • bold puisque smaller doit apparaître au moins une fois.
    • bold smaller smaller smaller smaller puisque smaller doit apparaître au maximum une fois.
    • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller

    Croisillon (#)

    Le multiplicateur croisillon indique que l'entité peut être répétée une ou plusieurs fois (comme le multiplicateur plus) mais chaque occurence est séparée par une virgule (',').

    bold smaller#

    Cet exemple accepte les valeurs suivantes :

    • bold smaller
    • bold smaller, smaller
    • bold smaller, smaller, smaller et ainsi de suite.

    Mais pas :

    • bold puisque smaller doit apparaître au moins une fois.
    • bold smaller smaller smaller puisque les différentes occurences de smaller doivent être séparées par des virgules.
    • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller.

    Résumé

    Signe Nom Description Exemple
    Combinateurs
      Juxtaposition Les composantes sont obligatoires et doivent apparaître dans cet ordre solid <longueur>
    && Double esperluette Les composantes sont obligatoires mais peuvent apparaître dans n'importe quel ordre <longueur> && <chaîne>
    || Double barre Au moins une des composantes doit être présente, et elles peuvent apparaître dans n'importe quel ordre <'border-image-outset'> || <'border-image-slice'>
    | Simple barre Seulement une des composantes doit être présente smaller | small | normal | big | bigger
    [ ] Crochets Groupes les composantes pour outrepasser les règles de priorité bold [ thin && <longueur> ]
    Multiplicateurs
      Aucun multiplicateur Exactement une fois solid
    * Astérisque 0 ou plusieurs fois bold smaller*
    + Signe plus 1 ou plusieurs fois bold smaller+
    ? Point d'interrogation 0 ou une fois (qui est optionelle) bold smaller?
    {A,B} Accolades Au moins A fois, au maximum B fois bold smaller{1,3}
    # Croisillon 1 ou plusieurs fois, mais chaque occurence est séparée par une virgule (',') bold smaller#

    Spécifications

    Spécification État Commentaire
    CSS Values and Units Module Level 3 Candidate Recommendation Depuis CSS Level 2 (Revision 1), ajoute le multiplicateur croisillon.
    CSS Level 2 (Revision 1) Recommendation Depuis CSS Level 1, ajoute le combinateur double esperluette.
    CSS Level 1 Recommendation Définition initiale.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale