symbols()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die symbols() CSS-Funktion ermöglicht die Definition von Zählerstilen direkt als Wert von Eigenschaften wie list-style, und bietet eine weniger mächtige, aber einfachere Alternative zur Methode @counter-style zur 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 eines der folgenden sein:

  • cyclic: Das System durchläuft die angegebenen Werte in der Reihenfolge ihrer Definition und kehrt am Ende zum Anfang zurück.
  • numeric: Das System interpretiert die gegebenen Werte als aufeinanderfolgende Einheiten eines Stellenwert-Zahlensystems.
  • alphabetic: Das System interpretiert die gegebenen 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 Zyklus erneut (einmal für den ersten Zyklus, zweimal für den zweiten usw.).
  • fixed: Das System durchläuft die angegebenen Werte einmal und fällt dann auf arabische Ziffern zurück.

Formaler 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

Siehe auch