symbols

Syntaxe

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

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

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

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

CSS

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

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les descripteurs de @counter-style : system, additive-symbols, negative, prefix, suffix, range, pad, speak-as et fallback
• Propriétés de style de liste : list-style, list-style-image, list-style-position
• La fonction symbols() pour créer des styles de compteur anonymes.
• Le module de styles de compteur CSS
• Le module de listes et compteurs CSS