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 es, Zählerstile inline direkt als Wert von Eigenschaften wie list-style zu definieren und bietet eine weniger leistungsstarke, 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 Zeichenfolgen 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 definierten Werte in der Reihenfolge ihrer Definition und kehrt am Ende zu Beginn zurück.
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 gibt sie bei jedem Zyklus ein weiteres Mal aus (einmal im ersten Zyklus, zweimal im zweiten usw.).
fixed: Das System durchläuft die angegebenen Werte einmal und verfällt dann in Arabische Ziffern.

Formale Syntax

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

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

<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

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

@counter-style Deskriptoren: system, symbols, additive-symbols, prefix, suffix, range, pad, speak-as, fallback
Listeneigenschaften: list-style, list-style-type
CSS-Zählerstile-Modul
CSS-Listen und -Zähler-Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden