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.

Resumen

El descriptor additive-symbols es similar al descriptor symbols(), y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor system es additive. El descriptor additive-symbols define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo. El sistema aditivo es usado para construir sistemas de numeración de valores de signos como la numeración romana.

Cuando el valor del descriptor es cyclic, numeric, alphabetic, symbolic, o fixed, se usa el descriptor symbols, en lugar de additive-symbols para especificar los símbolos de conteo.

Related at-rule@counter-style
Valor inicialn/a (required)
Valor calculadocomo se especifica

Sintaxis

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

Sintaxis formal

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>* )

Ejemplo

Contenido HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Contenido CSS

css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}

Resultado

Especificaciones

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también