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.
En lien avec les règles @ | @counter-style |
---|---|
Valeur initiale | N/A |
Média | tous |
Valeur calculée | comme spécifié |
Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
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 :
Syntaxe formelle
<symbol>+où
<symbol> = <string> | <image> | <custom-ident>
où
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
où
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient() <a="" href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs#Single_bar" title="Single bar: exactly one of the entities must be present">| <conic-gradient()></repeating-radial-gradient()>où
| rtl
= ltr
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )où
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>où
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>où
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
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
Spécification | État | Commentaires |
---|---|---|
CSS Counter Styles Level 3 La définition de 'symbols' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Aucun support Non | Edge ? | Firefox Support complet 33 | IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android ? | Edge Mobile ? | Firefox Android Support complet 33 | Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
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.