symbols
Le descripteur symbols
, rattaché à la règle @ @counter-style
, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("premier.svg") url("deuxieme.svg") url("troisieme.svg");
symbols: indic-numbers;
Le descripteur symbols
doit être défini lorsque la valeur du descripteur system
vaut cyclic
, numeric
, alphabetic
, symbolic
ou fixed
. Lorsque system
vaut additive
, ce sera le descripteur additive-symbols
qui sera utilisé afin de définir les symboles.
Syntaxe
Valeurs
- Des chaînes de caractères (
<string>
) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon"\24B6"
. - Des images (
<image>
) en utilisant la notation fonctionnelleurl(chemin-vers-image.png)
. Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement. - Des identifiants (
<custom-ident>
)
<symbol>
-
Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur
symbols
peut être :
Définition formelle
En lien avec les règles @ | @counter-style |
---|---|
Valeur initiale | n/a (required) |
Valeur calculée | comme 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
CSS
@counter-style symbols-exemple {
system: fixed;
symbols: A "1" "\24B7" D E;
}
.exemple {
list-style: symbols-exemple;
}
HTML
<ul class="exemple">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
</ul>
Résultat
Spécifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
@counter-style
,list-style
,list-style-image
,list-style-position
,symbols()
, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,url()
.