symbols()

Die symbols() CSS-Funktion ermöglicht es, Zählerstile direkt als Wert von Eigenschaften wie z.B. list-style inline zu definieren und bietet damit eine weniger mächtige, aber einfachere Alternative zur @counter-style-Methode der Definition eines Zählerstils.

Im Gegensatz zu @counter-style, das einen wiederverwendbaren Zählerstil definiert, ist symbols() anonym (d.h., es kann nur einmal verwendet werden). Diese Funktion akzeptiert Zeichenketten und Bilder als Werte. Im Vergleich dazu akzeptiert der symbols Deskriptor von @counter-style auch Bezeichner.

Syntax

css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

<symbols-type> kann einer der folgenden sein:

  • cyclic: Das System durchläuft die angegebenen Werte in der Reihenfolge ihrer Definition und kehrt zum Anfang zurück, wenn es das Ende erreicht.
  • numeric: Das System interpretiert die angegebenen Werte als aufeinanderfolgende Einheiten eines Stellenwert-Zahlensystems.
  • alphabetic: Das System interpretiert die angegebenen Werte als Ziffern eines alphabetischen Zahlensystems, ähnlich einem Stellenwert-Zahlensystem, jedoch ohne 0.
  • symbolic: Das System durchläuft die Werte und druckt sie bei jedem Durchlauf zusätzlich aus (einmal für den ersten Durchlauf, zweimal für den zweiten, usw.).
  • fixed: Das System durchläuft die angegebenen Werte einmal und fällt dann auf arabische Zahlen zurück.

Formale Syntax

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

HTML

html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

css
ol {
  list-style: symbols(cyclic "*" "†" "‡");
}

Ergebnis

Spezifikationen

Specification
CSS Counter Styles Level 3
# symbols-function

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch