@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 Textdarstellung umgewandelt wird.

Während CSS viele nützliche, vordefinierte Zählerstile bietet, bietet die @counter-style-At-Regel eine flexible Methode zur Erstellung von Zählern. Diese At-Regel kommt den Anforderungen der weltweiten Typografie entgegen, indem sie es Autoren ermöglicht, eigene Zählerstile zu definieren, wenn die vordefinierten Stile ihren Anforderungen nicht gerecht werden.

Syntax

css

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

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

Zählerstilname

<counter-style-name>: Gibt einen Namen für Ihren Zählerstil an. Es wird als groß-/klein-schreibungssensitiver <custom-ident> ohne Anführungszeichen angegeben. Der Wert darf nicht none sein. Wie bei allen benutzerdefinierten Identifizierern darf der Wert Ihres Zählerstils kein CSS-weites Schlüsselwort sein. Vermeiden Sie andere aufgezählte CSS-Eigenschaftenwerte, einschließlich der Werte von list und counter style Eigenschaften. Der Name Ihres Zählers darf nicht den groß-/klein-schreibungssensitiven list-style-type Eigenschaftswerten decimal, disc, square, circle, disclosure-open und disclosure-closed entsprechen.

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

Deskriptoren

system: Gibt den Algorithmus an, der zum Konvertieren des ganzzahligen Wertes eines Zählers in eine Textdarstellung verwendet werden soll. Wenn der Wert cyclic, numeric, alphabetic, symbolic oder fixed ist, muss der Deskriptor symbols ebenfalls angegeben werden. Wenn der Wert additive ist, muss der Deskriptor additive-symbols ebenfalls angegeben werden.
symbols: Gibt die Symbole an, die für die Markerdarstellungen verwendet werden sollen. Symbole können Zeichenfolgen, Bilder oder benutzerdefinierte Identifizierer enthalten. Dieser Deskriptor ist erforderlich, wenn der Deskriptor system auf cyclic, numeric, alphabetic, symbolic oder fixed eingestellt ist.
additive-symbols: Definiert die additiven Tupel für additive Systeme. Während die im Deskriptor symbols angegebenen Symbole von den meisten Algorithmen zur Konstruktion von Markerdarstellungen verwendet werden, bestehen additive Zählersysteme, wie z.B. römische Ziffern, aus einer Reihe von gewichteten Symbolen. Der Deskriptor ist eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen ganzzahligen Gewichten, die nach Gewicht in absteigender Reihenfolge aufgelistet sind. Dieser Deskriptor ist erforderlich, wenn der Deskriptor system auf additive eingestellt ist.
negative: Gibt die Symbole an, die an die Zählerdarstellung angehängt oder vorangestellt werden sollen, wenn der Wert negativ ist.
prefix: Gibt ein Symbol an, das der Markerdarstellung vorangestellt werden soll. Präfixe werden in der letzten Stufe zur Darstellung hinzugefügt, bevor Zeichen durch den Deskriptor negative zu negativen Zählerwerten hinzugefügt werden.
suffix: Gibt, ähnlich wie der Präfix-Deskriptor, ein Symbol an, das an die Markerdarstellung angehängt wird. Suffixe kommen nach der Markerdarstellung, einschließlich der Zeichen, die durch den Deskriptor negative zu 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 Sie möchten, dass die Markerdarstellungen eine Mindestlänge haben. Zum Beispiel, wenn Sie möchten, dass die Zähler bei 01 beginnen und durch 02, 03, 04 usw. gehen, dann sollte der Deskriptor pad verwendet werden. Für Darstellungen, die größer sind als der angegebene pad-Wert, wird der Marker wie normal konstruiert.
speak-as: Beschreibt, wie Sprachausgabe-Synthesizer, wie Bildschirmleseprogramme, den Zählerstil ankündigen sollten. Zum Beispiel kann der Wert des Listenelement-Markers als Zahlen oder Alphabete für geordnete Listen oder als akustische Hinweise für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.
fallback: Gibt den Zählernamen des Systems an, auf das zurückgegriffen werden soll, wenn das angegebene System nicht in der Lage ist, die Darstellung eines Zählerwerts zu konstruieren oder wenn der Zählerwert außerhalb des angegebenen range liegt. Wenn der Fallback-Zähler ebenfalls nicht in der Lage ist, den Wert darzustellen, wird der Fallback dieses Zählers verwendet, sofern einer angegeben ist. Wenn entweder keine Fallback-Zähler beschrieben werden oder wenn die Kette von Fallback-Systemen nicht in der Lage ist, einen Zählerwert darzustellen, fällt sie letztendlich auf den decimal Stil zurück.

Formale Syntax

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

Beispiele

Symbole mit Zählerstil spezifizieren

css

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

Die obige Zählerstilregel kann auf Listen wie folgt angewendet werden:

css

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

Der obige Code erzeugt das folgende 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).

Fertige Zählerstile

Finden Sie eine Sammlung von über 100 counter-style-Code-Snippets im Dokument Fertige Zählerstile. Dieses Dokument bietet Zähler, die den Bedürfnissen von Sprachen und Kulturen auf der ganzen Welt gerecht werden.

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

Spezifikationen

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