additive-symbols CSS At-Regel-Deskriptor

Syntax

/* Single tuple */
additive-symbols: 3 "*";

/* Comma-separated list of tuples */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url("symbol.png");

/* Binary counter */
additive-symbols:
  2 "1",
  1 "0";

/* Etruscan (a civilization in ancient Italy) counter  */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Werte

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

<integer>

Ein nicht-negativer Ganzzahlwert, der das Ganzzahlgewicht des zugehörigen Symbolwertes des Tupels angibt.

<symbol>

Gibt das Zählersymbol an, das für den durch den assoziierten <integer>-Gewichtswert des Tupels definierten Gewichtswert verwendet werden soll.

Beschreibung

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 absteigender Reihenfolge der Ganzzahlwerte vorliegen. Die Ganzzahl und das Symbol werden zusammengefügt, um das Zählersymbol zu bilden.

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

Formale Definition

Formale Syntax

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

<integer> = 
  <number-token>  

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

Beispiele

Additive Symbole angeben

HTML

In diesem Beispiel geben system: additive zusammen mit den additive-symbols-Deskriptorwerten an, wie Zahlen als römische Ziffern dargestellt werden sollen. Der Wert jedes <li>-Elements in der Liste wird entsprechend den in @counter-style definierten Regeln in eine römische Ziffer 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 stellt das Numeral C 100 dar, und IX stellt 9 dar. Dies erzeugt CIX als Zähler für das Listenelement 109. Das nächste Listenelement erhält automatisch den Wert 110. Die römische Zahl CX wird aus C für 100 und X für 10 abgeleitet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style Deskriptoren: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion zur Erstellung anonymer Zählertypen
• CSS-Zählerstile Modul