@counter-style
Baseline 2023 *Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Die @counter-style
CSS At-Regel ermöglicht es Ihnen, vordefinierte Listenstile zu erweitern und eigene Zählerstile zu definieren, die nicht Teil des vordefinierten Satzes von Stilen sind. Die @counter-style
-Regel enthält Deskriptoren, die definieren, wie der Zählerwert in eine Zeichenkettenrepräsentation umgewandelt wird.
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style: thumbs;
}
Obwohl CSS viele nützliche vordefinierte Zählerstile bereitstellt, bietet die @counter-style
-At-Regel eine flexible Methode zum Erstellen von Zählern. Diese Regel erfüllt die Anforderungen weltweiter Typografie, indem Autoren ihre eigenen Zählerstile erstellen können, falls die vordefinierten Stile nicht ihren Anforderungen entsprechen.
Syntax
Die @counter-style
-At-Regel wird durch einen Zählerstil-Namen identifiziert, und der Stil des benannten Zählers kann mithilfe einer <declaration-list>
, die aus einem oder mehreren Deskriptoren und deren Werten besteht, fein abgestimmt werden.
Zählerstil-Name
<counter-style-name>
-
Gibt einen Namen für Ihren Zählerstil an. Dieser wird als Groß-/Kleinschreibung beachtender
<custom-ident>
ohne Anführungszeichen angegeben. Der Wert darf nichtnone
sein. Wie bei allen benutzerdefinierten Bezeichnern kann der Wert Ihres Zählerstils kein CSS-weites Schlüsselwort sein. Vermeiden Sie außerdem andere aufgezählte CSS-Eigenschaftswerte, einschließlich der Werte von list und counter style-Eigenschaften. Der Name Ihres Zählers kann nicht den Groß-/Kleinschreibung ignorierendenlist-style-type
-Eigenschaftswerten wiedecimal
,disc
,square
,circle
,disclosure-open
unddisclosure-closed
entsprechen.Hinweis: Die nicht überschreibbaren Zählerstil-Namen
decimal
,disc
,square
,circle
,disclosure-open
unddisclosure-closed
können nicht als Name eines benutzerdefinierten Zählers verwendet werden. Sie sind jedoch in anderen Kontexten gültig, in denen der<counter-style-name>
-Datentyp erwartet wird, wie z. B. insystem: extends <counter-style-name>
.
Deskriptoren
system
-
Gibt den Algorithmus an, der zur Umwandlung des Ganzzahlenwerts eines Zählers in eine Zeichenkettenrepräsentation verwendet wird. Wenn der Wert
cyclic
,numeric
,alphabetic
,symbolic
oderfixed
ist, muss auch der Deskriptorsymbols
angegeben werden. Wenn der Wertadditive
ist, muss auch der Deskriptoradditive-symbols
angegeben werden. symbols
-
Gibt die Symbole an, die für die Markierungsrepräsentationen verwendet werden sollen. Symbole können Zeichenketten, Bilder oder benutzerdefinierte Bezeichner enthalten. Dieser Deskriptor ist erforderlich, wenn der
system
-Deskriptor aufcyclic
,numeric
,alphabetic
,symbolic
oderfixed
gesetzt ist. additive-symbols
-
Definiert die additiven Paare für additive Systeme. Während die im Deskriptor
symbols
angegebenen Symbole von den meisten Algorithmen zur Konstruktion von Markierungsrepräsentationen verwendet werden, bestehen additive Zählsysteme wie römische Zahlen aus einer Reihe gewichteter Symbole. Der Deskriptor ist eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen Gewichten, die nach Gewicht in absteigender Reihenfolge aufgelistet sind. Dieser Deskriptor ist erforderlich, wenn dersystem
-Deskriptor aufadditive
gesetzt ist. negative
-
Gibt Symbole an, die der Zählerrepräsentation hinzugefügt oder vorangestellt werden, wenn der Wert negativ ist.
prefix
-
Gibt ein Symbol an, das der Markierungsrepräsentation vorangestellt werden soll. Präfixe werden der Darstellung in der Endphase hinzugefügt, bevor alle Zeichen hinzugefügt werden, die durch den Deskriptor
negative
bei negativen Zählerwerten eingefügt werden. suffix
-
Gibt, ähnlich wie der Deskriptor
prefix
, ein Symbol an, das der Markierungsrepräsentation angefügt wird. Suffixe erscheinen nach der Markierungsrepräsentation, einschließlich nach allen Zeichen, die durch den Deskriptornegative
bei negativen Zählerwerten hinzugefügt werden. range
-
Definiert den Wertebereich, über den der Zählerstil anwendbar ist. Wenn ein Zählerstil verwendet wird, um einen Zählerwert außerhalb der durch diesen Deskriptor definierten Bereiche darzustellen, fällt der Zählerstil auf seinen
fallback
-Stil zurück. pad
-
Wird verwendet, wenn die Markierungsrepräsentationen eine Mindestlänge haben sollen. Beispielsweise, wenn Sie möchten, dass die Zähler bei 01 beginnen und über 02, 03, 04 usw. gehen, dann wird der Deskriptor
pad
verwendet. Bei Darstellungen, die länger als der angegebenepad
-Wert sind, wird die Markierung wie gewohnt erstellt. speak-as
-
Beschreibt, wie Sprachsynthesizer, wie Bildschirmleseprogramme, den Zählerstil ankündigen sollen. Beispielsweise kann der Wert des Listenelementmarkers je nach Wert dieses Deskriptors als Zahlen oder Alphabete für geordnete Listen oder als Audiomarkierungen für ungeordnete Listen vorgelesen werden.
fallback
-
Gibt den Zählernamen des Systems an, auf das zurückgegriffen werden soll, wenn das angegebene System entweder keine Darstellung eines Zählerwerts erzeugen kann oder wenn der Zählerwert außerhalb des angegebenen
range
-Werts liegt. Wenn der Fallback-Zähler auch die Darstellung des Werts nicht erzeugen kann, wird auf dessen Fallback zurückgegriffen, falls einer angegeben ist. Wenn weder Fallback-Zähler beschrieben sind noch die Kette von Fallback-Systemen einen Zählerwert darstellen kann, wird letztendlich auf den Stildecimal
zurückgegriffen.
Formale Syntax
@counter-style =
@counter-style <counter-style-name> { <declaration-list> }
Beispiele
Symbole mit counter-style angeben
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
Die obige Regel für Zählerstile kann auf Listen wie folgt angewendet werden:
.items {
list-style: circled-alpha;
}
Der obige Code ergibt folgendes Ergebnis:
Weitere Beispiele finden Sie auf der Demo-Seite (Code).
Vorgefertigte Zählerstile
Finden Sie eine Sammlung von über 100 counter-style
-Codefragmenten im Dokument Vorgefertigte Zählerstile. Dieses Dokument bietet Zähler, die die Anforderungen von Sprachen und Kulturen weltweit erfüllen.
Der Counter styles converter greift auf diese Liste zu, um Zählerstile zu testen und beispielhaften Code zu generieren.
Spezifikationen
Specification |
---|
CSS Counter Styles Level 3 # the-counter-style-rule |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support