symbols
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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()
.