symbols() CSS-Funktion
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die symbols() CSS-Funktion ermöglicht das definieren von Zählerstilen inline, direkt als Wert von Eigenschaften wie list-style. Sie bietet eine weniger leistungsfähige, aber einfachere Alternative zur @counter-style-Methode zur Definition eines Zählerstils.
Im Gegensatz zu @counter-style, welche einen wiederverwendbaren Zählerstil definiert, ist symbols() anonym (d.h. sie kann nur einmal verwendet werden). Diese Funktion akzeptiert Strings 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 Werte 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 Positionswertnummerierungssystems.alphabetic: Das System interpretiert die angegebenen Werte als Ziffern eines alphabetischen Nummerierungssystems, ähnlich einem Positionswertnummerierungssystem, jedoch ohne0.symbolic: Das System durchläuft die Werte und gibt sie in jedem Zyklus ein weiteres Mal aus (einmal für den ersten Zyklus, zweimal für den zweiten, usw.).fixed: Das System durchläuft die angegebenen Werte einmal und wechselt dann zu arabischen 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
| Spezifikation |
|---|
| CSS Counter Styles Level 3 # symbols-function |
Browser-Kompatibilität
Siehe auch
@counter-styleDeskriptoren: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