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

Spécification Statut Commentaires
CSS Counter Styles Level 3
La définition de 'symbols()' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Copatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 35 (35) Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 35.0 (35) Pas de support Pas de support Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,