symbols()

La fonction symbols() permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec @counter-style, ces styles sont anonymes. La fonction symbols() ne possède pas toute la flexibilité offerte par la règle @ @counter-style mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par @counter-style.

Syntaxe

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

<symbols-type> est l'un des mots-clés suivants :

• cyclic : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.
• numeric : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.
• alphabetic : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.
• symbolic : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.
• fixed : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.

Exemples

HTML

<ol>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ol>

CSS

ol {
  list-style: symbols(alphabetic "*" "\2020" "\2021");
}

Résultat

Spécifications

Copatibilité des navigateurs

Voir aussi

• @counter-style
• list-style-type et la propriété raccourcie correspondante : list-style.