Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

symbols

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Le descripteur CSS symbols de la règle @counter-style est utilisé pour spécifier les symboles servant à créer les représentations du compteur dans le système de compteur indiqué. Ce descripteur est obligatoire lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed.

Syntaxe

css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

Valeurs

Le descripteur symbols est spécifié comme une liste d'une ou plusieurs valeurs <symbol> séparées par des espaces.

<symbol>

Spécifie le symbole à utiliser dans le système de compteur. Chaque symbole de la liste peut être une <string>, une <image> ou un <custom-ident>. La valeur <image> peut être spécifiée comme une <url> ou une <gradient>.

Note : Lorsqu'on utilise un identifiant pour un symbole, il faut noter que les caractères non alphabétiques ASCII comme *, " et \ ne sont pas considérés comme des identifiants. Ils doivent être soit entourés de guillemets comme une chaîne, soit échappés.

Description

Un symbole peut être une chaîne de caractères, une image ou un identifiant. Il est utilisé dans la règle @counter-style at-rule.

Lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed, le descripteur symbols doit être spécifié. Pour le système additive, utilisez le descripteur additive-symbols à la place pour spécifier les symboles.

Bien qu'un espace entre les symboles entre guillemets ne soit pas obligatoire, cela rend le CSS plus lisible. Pour utiliser un guillemet comme symbole, il faut soit échapper le caractère guillemet, soit entourer le caractère de guillemets différents, comme "'".

Lorsque vous définissez des symboles avec des identifiants au lieu de chaînes de caractères, veillez à respecter les règles de syntaxe des identifiants. Par exemple, comme indiqué ci-dessus, les caractères non alphabétiques ASCII comme * ne sont pas des identifiants et doivent être entourés de guillemets ou échappés. Les caractères d'échappement hexadécimal sont suivis d'un espace. Cet espace peut ressembler à celui qui sépare deux identifiants, mais il permet aux chiffres de suivre les caractères échappés en hexadécimal. Cela signifie que deux espaces doivent être inclus après un identifiant échappé en hexadécimal pour le séparer du suivant. Par exemple, il est préférable d'utiliser la chaîne "\2A 1" plutôt que \2A 1 avec deux espaces, car vos outils de code pourraient supprimer les doubles espaces. Il est généralement plus sûr de mettre entre guillemets les identifiants qui doivent être échappés ou d'utiliser des chaînes de caractères.

Définition formelle

En lien avec les règles @@counter-style
Valeur initialen/a (required)
Valeur calculéecomme spécifié

Syntaxe formelle

symbols = 
<symbol>+

<symbol> =
<string> |
<image> |
<custom-ident>

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Exemples

Définir les symboles du compteur

Dans cet exemple, la liste des valeurs pour le descripteur symbols inclut des lettres (A, D, E), un nombre entre guillemets ("1"), et un identifiant échappé en hexadécimal entre guillemets ("\24B7") pour le caractère .

HTML

html
<ul class="list">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>

CSS

css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Résultat

Spécifications

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Compatibilité des navigateurs

Voir aussi