Fonction CSS symbols()
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La fonction CSS symbols() permet de définir des styles de compteur en ligne, directement comme valeur de propriétés telles que list-style, offrant une alternative moins puissante mais plus simple à la méthode @counter-style de définition d'un style de compteur.
Contrairement à @counter-style, qui définit un style de compteur réutilisable, symbols() est anonyme (c'est-à-dire qu'elle ne peut être utilisée qu'une seule fois). Cette fonction accepte des chaînes de caractères et des images comme valeurs. En comparaison, le descripteur symbols de @counter-style accepte également des identifiants.
Syntaxe
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
<symbols-type> est l'un des mots-clés suivants :
cyclic: Le système parcourt les valeurs données dans l'ordre de leur définition et revient au début lorsqu'il atteint la fin.numeric: Le système interprète les valeurs données comme les unités successives d'un système de numération positionnelle.alphabetic: Le système interprète les valeurs données comme les chiffres d'un système de numération alphabétique, similaire à un système de numération positionnelle mais sans0.symbolic: Le système parcourt les valeurs, les affichant une fois de plus à chaque cycle (une fois pour le premier cycle, deux fois pour le deuxième, etc.).fixed: Le système parcourt les valeurs données une fois, puis revient aux chiffres arabes.
Syntaxe formelle
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Exemples
HTML
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
</ol>
CSS
ol {
list-style: symbols(cyclic "*" "†" "‡");
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Counter Styles Level 3 # symbols-function |
Compatibilité des navigateurs
Voir aussi
- Les descripteurs de
@counter-style:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback - Les propriétés de styles de listes :
list-style,list-style-type - Le module des styles de compteurs CSS
- Le module des listes et compteurs CSS