symbols()

Die CSS-Funktion symbols() ermöglicht es, Zählerstile direkt als Wert von Eigenschaften wie list-style inline zu definieren und bietet eine weniger leistungsstarke, aber einfachere Alternative zur Methode @counter-style, um einen Zählerstil zu definieren.

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 Zeichenfolgen und Bilder als Werte. Im Vergleich dazu akzeptiert der @counter-style-Deskriptor symbols auch Identifikatoren.

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-Zahlsystems.
  • alphabetic: Das System interpretiert die angegebenen Werte als Ziffern eines alphabetischen Zahlsystems, ähnlich einem Stellenwert-Zahlsystem, jedoch ohne 0.
  • symbolic: Das System durchläuft die Werte, wobei es ihnen bei jedem Durchlauf eine zusätzliche Wiederholung hinzufügt (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 Ziffern zurück.

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