@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 Stilsatzes sind. Die @counter-style Regel enthält Deskriptoren, die definieren, wie der Zählerwert in eine Zeichenketten-Darstellung umgewandelt wird.

Während CSS viele nützliche vordefinierte Zählerstile bereitstellt, bietet die @counter-style At-Regel eine offene Methode zur Erstellung von Zählern. Diese At-Regel bedient die Bedürfnisse der weltweiten Typografie, indem sie Autoren erlaubt, ihre eigenen Zählerstile zu definieren, wenn die vordefinierten Stile nicht ihren Anforderungen entsprechen.

Syntax

css

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Die @counter-style At-Regel wird durch einen Counter-Style-Namen identifiziert, und der Stil des benannten Zählers kann mit einer <declaration-list>, die aus einem oder mehreren Deskriptoren und ihren Werten besteht, feinabgestimmt werden.

Counter-Style-Name

<counter-style-name>: Bietet einen Namen für Ihren Zählerstil. Er wird als Groß-/Kleinschreibung beachtendes <custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nicht none sein. Wie alle benutzerdefinierten Bezeichner kann der Wert Ihres Zählerstils kein CSS-generisches Schlüsselwort sein. Vermeiden Sie andere aufgezählte CSS-Eigenschaftenwerte, einschließlich der Werte der listen und Counter-Style Eigenschaften. Der Name Ihres Zählers kann nicht die Groß-/Kleinschreibung nicht beachtende list-style-type Eigenschaftswerte von decimal, disc, square, circle, disclosure-open und disclosure-closed sein.

Hinweis: Die nicht überschreibbaren Zählerstilnamen decimal, disc, square, circle, disclosure-open und disclosure-closed können nicht als der 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 in system: extends <counter-style-name>.

Deskriptoren

system: Gibt den zu verwendenden Algorithmus an, um den ganzzahligen Wert eines Zählers in eine Zeichenketten-Darstellung umzuwandeln. Wenn der Wert cyclic, numeric, alphabetic, symbolic oder fixed ist, muss der symbols Deskriptor ebenfalls angegeben werden. Wenn der Wert additive ist, muss der additive-symbols Deskriptor ebenfalls angegeben werden.
symbols: Gibt die Symbole an, die für die Markerdarstellungen verwendet werden sollen. Symbole können Zeichenketten, Bilder oder benutzerdefinierte Bezeichner enthalten. Dieser Deskriptor ist erforderlich, wenn der system Deskriptor auf cyclic, numeric, alphabetic, symbolic oder fixed gesetzt ist.
additive-symbols: Definiert die additiven Tupel für additive Systeme. Während die im symbols Deskriptor angegebenen Symbole von den meisten Algorithmen zur Darstellung von Markern verwendet werden, bestehen additive Zählsysteme, wie römische Zahlen, aus einer Reihe von gewichteten Symbolen. Die Deskriptorenliste enthält Zählersymbole zusammen mit ihren nicht-negativen ganzzahligen Gewichten, nach Gewicht in absteigender Reihenfolge aufgelistet. Dieser Deskriptor ist erforderlich, wenn der system Deskriptor auf additive gesetzt ist.
negative: Gibt Symbole an, die der Zählerdarstellung hinzugefügt oder vorangestellt werden, wenn der Wert negativ ist.
prefix: Gibt ein Symbol an, das der Markerdarstellung vorangestellt werden soll. Präfixe werden in der endgültigen Phase zur Darstellung hinzugefügt, vor allen Zeichen, die durch den negative Deskriptor zu negativen Zählerwerten hinzugefügt wurden.
suffix: Gibt, ähnlich dem Präfix-Deskriptor, ein Symbol an, das der Markerdarstellung hinzugefügt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nach allen Zeichen, die durch den negative Deskriptor zu negativen Zählerwerten hinzugefügt wurden.
range: Definiert den Bereich von Werten, über die der Zählerstil anwendbar ist. Wenn ein Zählerstil verwendet wird, um einen Zählerwert darzustellen, der außerhalb der durch diesen Deskriptor definierten Bereiche liegt, wird der Zählerstil auf seinen fallback-Stil zurückfallen.
pad: Wird verwendet, wenn Sie möchten, dass die Markerdarstellungen eine Mindestlänge haben. Wenn Sie beispielsweise möchten, dass die Zähler bei 01 beginnen und mit 02, 03, 04 usw. fortfahren, dann ist der pad Deskriptor zu verwenden. Für Darstellungen, die größer als der angegebene pad-Wert sind, wird der Marker wie gewohnt konstruiert.
speak-as: Beschreibt, wie Sprachsynthesizer, wie Bildschirmlesegeräte, den Zählerstil ankündigen sollen. Zum Beispiel kann der Wert des Listenelements als Zahlen oder Alphabete für geordnete Listen oder als Audiohinweise für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.
fallback: Gibt den Zählernamen des Systems an, zu dem gewechselt werden soll, wenn entweder das angegebene System nicht in der Lage ist, die Darstellung eines Zählerwertes zu konstruieren, oder wenn der Zählerwert außerhalb des angegebenen range liegt. Wenn der Ersatz-Zähler ebenfalls versagt, den Wert darzustellen, dann wird dessen Fallback verwendet, falls eines angegeben ist. Gibt es entweder keine beschriebenen Ersatz-Zähler oder kann die Kette der Ersatzsysteme keinen Zählerwert darstellen, fällt letztlich auf den decimal Stil zurück.

Formale Syntax

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }

Beispiele

Symbole mit counter-style spezifizieren

css

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

Die obige Counter-Style-Regel kann auf Listen wie diese angewendet werden:

css

.items {
  list-style: circled-alpha;
}

Der obige Code erzeugt folgendes Ergebnis:

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>

Sehen Sie mehr Beispiele auf der Demoseite (Code).

Vorgefertigte Zählerstile

Finden Sie eine Sammlung von über 100 counter-style Code-Snippets im Dokument Vorgefertigte Zählerstile. Dieses Dokument bietet Zähler, die die Bedürfnisse von Sprachen und Kulturen weltweit erfüllen.

Der Zählerstile-Konverter zieht aus dieser Liste, um Code für Zählerstile zu testen und zum Kopieren und Einfügen zu erstellen.

Spezifikationen

Specification
CSS Counter Styles Level 3 # the-counter-style-rule

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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