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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
additive-symbols

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi