additive-symbols

Syntaxe

/* Élément unique */
additive-symbols: 3 "*";

/* Liste d'éléments séparés par des virgules */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url("symbol.png");

/* Compteur binaire */
additive-symbols:
  2 "1",
  1 "0";

/* Compteur étrusque (civilisation de l'Italie antique) */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Valeurs

Ce descripteur accepte une liste de tuples additifs (ensemble d'éléments) séparés par des virgules, chaque tuple étant composé des deux valeurs suivantes séparées par un espace :

<integer>

Un entier positif ou nul qui indique le poids entier associé au symbole du tuple.

<symbol>

Spécifie le symbole du compteur à utiliser pour la valeur de poids définie par l'entier associé du tuple.

Description

Le descripteur additive-symbols définit une liste de tuples additifs séparés par des virgules. Chaque tuple additif contient un entier positif ou nul et un symbole de compteur, séparés par un espace. Pour être valide, la liste doit être dans l'ordre décroissant des entiers. L'entier et le symbole sont concaténés pour former le symbole du compteur.

Lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed, utilisez le descripteur symbols() à la place de additive-symbols.

Définition formelle

Syntaxe formelle

additive-symbols = 
  [ <integer [0,∞]> && <symbol> ]#  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<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

Spécification des symboles additifs

HTML

Dans cet exemple, system: additive avec les valeurs du descripteur additive-symbols spécifie comment les nombres doivent être représentés en chiffres romains. La valeur de chaque élément <li> de la liste est convertie en chiffre romain selon les règles définies dans @counter-style.

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

@counter-style uppercase-roman {
  system: additive;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Résultat

Pour l'élément de liste ayant la valeur 109, le chiffre C représente 100 et IX représente 9. Cela génère le compteur CIX pour l'élément de liste 109. L'élément suivant reçoit automatiquement la valeur 110. Le chiffre romain CX est obtenu à partir de C pour 100 et X pour 10.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Descripteurs de @counter-style : system, symbols, negative, prefix, suffix, range, pad, speak-as et fallback
• 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