additive-symbols

Der Deskriptor akzeptiert eine kommagetrennte Liste von additiven Tupeln, wobei jedes Tupel aus den folgenden zwei Werten besteht, die durch ein Leerzeichen getrennt sind:

<integer>

Ein nicht-negativer Ganzzahlenwert, der den ganzzahligen gewichteten Wert des zugehörigen Symbolwerts des Tupels angibt.

<symbol>

Gibt das Zählersymbol an, das für den durch den zugehörigen <integer> gewichteten Wert des Tupels definierten Gewichtswert verwendet werden soll.

Der additive-symbols Deskriptor definiert eine kommagetrennte Liste von additiven Tupeln. Jedes additive Tupel enthält eine durch Leerzeichen getrennte nicht-negative Ganzzahl und ein Zählersymbol. Um gültig zu sein, muss die Liste in der absteigenden Reihenfolge der Ganzzahl sein. Die Ganzzahl und das Symbol werden zusammengefügt, um das Zählersymbol zu bilden.

Wenn der system Deskriptorwert cyclic, numeric, alphabetic, symbolic oder fixed ist, verwenden Sie den symbols() Deskriptor anstelle von additive-symbols.

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

HTML

In diesem Beispiel spezifizieren system: additive zusammen mit den additive-symbols Deskriptorwerten, wie Zahlen als römische Ziffern dargestellt werden sollen. Der Wert jedes <li> Elements in der Liste wird nach den in @counter-style definierten Regeln in eine römische Zahl umgewandelt.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</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;
}

Ergebnis

Für das Listenelement mit dem Wert 109 repräsentiert die Zahl C 100, und IX repräsentiert 9. Dies erzeugt CIX als Zähler für das Listenelement 109. Das nächste Listenelement erhält automatisch einen Wert von 110. Die römische Zahl CX wird abgeleitet von C für 100 und X für 10.

• @counter-style Deskriptoren: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion, um anonyme Zählerstile zu erstellen
• CSS-Zählerstile Modul