symbols
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Le descripteur CSS symbols
de la règle @counter-style
est utilisé pour spécifier les symboles servant à créer les représentations du compteur dans le système de compteur indiqué. Ce descripteur est obligatoire lorsque la valeur du descripteur system
est cyclic
, numeric
, alphabetic
, symbolic
ou fixed
.
Syntaxe
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;
Valeurs
Le descripteur symbols
est spécifié comme une liste d'une ou plusieurs valeurs <symbol>
séparées par des espaces.
<symbol>
-
Spécifie le symbole à utiliser dans le système de compteur. Chaque symbole de la liste peut être une
<string>
, une<image>
ou un<custom-ident>
. La valeur<image>
peut être spécifiée comme une<url>
ou une<gradient>
.
Note :
Lorsqu'on utilise un identifiant pour un symbole, il faut noter que les caractères non alphabétiques ASCII comme *
, "
et \
ne sont pas considérés comme des identifiants. Ils doivent être soit entourés de guillemets comme une chaîne, soit échappés.
Description
Un symbole peut être une chaîne de caractères, une image ou un identifiant. Il est utilisé dans la règle @counter-style
at-rule.
Lorsque la valeur du descripteur system
est cyclic
, numeric
, alphabetic
, symbolic
ou fixed
, le descripteur symbols
doit être spécifié. Pour le système additive
, utilisez le descripteur additive-symbols
à la place pour spécifier les symboles.
Bien qu'un espace entre les symboles entre guillemets ne soit pas obligatoire, cela rend le CSS plus lisible. Pour utiliser un guillemet comme symbole, il faut soit échapper le caractère guillemet, soit entourer le caractère de guillemets différents, comme "'"
.
Lorsque vous définissez des symboles avec des identifiants au lieu de chaînes de caractères, veillez à respecter les règles de syntaxe des identifiants. Par exemple, comme indiqué ci-dessus, les caractères non alphabétiques ASCII comme *
ne sont pas des identifiants et doivent être entourés de guillemets ou échappés. Les caractères d'échappement hexadécimal sont suivis d'un espace. Cet espace peut ressembler à celui qui sépare deux identifiants, mais il permet aux chiffres de suivre les caractères échappés en hexadécimal. Cela signifie que deux espaces doivent être inclus après un identifiant échappé en hexadécimal pour le séparer du suivant. Par exemple, il est préférable d'utiliser la chaîne "\2A 1"
plutôt que \2A 1
avec deux espaces, car vos outils de code pourraient supprimer les doubles espaces. Il est généralement plus sûr de mettre entre guillemets les identifiants qui doivent être échappés ou d'utiliser des chaînes de caractères.
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
>Définir les symboles du compteur
Dans cet exemple, la liste des valeurs pour le descripteur symbols
inclut des lettres (A
, D
, E
), un nombre entre guillemets ("1"
), et un identifiant échappé en hexadécimal entre guillemets ("\24B7"
) pour le caractère Ⓑ
.
HTML
<ul class="list">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
</ul>
CSS
@counter-style symbols-example {
system: fixed;
symbols: A "1" "\24B7" D E;
}
.list {
list-style: symbols-example;
}
Résultat
Spécifications
Specification |
---|
CSS Counter Styles Level 3> # counter-style-symbols> |
Compatibilité des navigateurs
Loading…
Voir aussi
- Les descripteurs de
@counter-style
:system
,additive-symbols
,negative
,prefix
,suffix
,range
,pad
,speak-as
etfallback
- Propriétés de style de liste :
list-style
,list-style-image
,list-style-position
- La fonction
symbols()
pour créer des styles de compteur anonymes. - Le module de styles de compteur CSS
- Le module de listes et compteurs CSS