additive-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 additive-symbols, utilisé pour la règle @ @counter-style est semblable au descripteur symbols() et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur system prend la valeur additive. Le descripteur additive-symbols définit des tuples additifs. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes de notation additive tels que les nombres romains.

css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);

Lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed, c'est le descripteur symbols qui est utilisé à la place de additive-symbols afin de définir les symboles utilisés pour le compteur.

Définition formelle

En lien avec les règles @@counter-style
Valeur initialen/a (required)
Valeur calculéecomme spécifié

Syntaxe formelle

additive-symbols = 
  [ <integer [0,∞]> && <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

css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.exemple {
  list-style: additive-symbols-example;
}

HTML

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