@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ählstile zu definieren, die nicht Teil des vordefinierten Sets von Stilen sind. Die @counter-style Regel enthält Deskriptoren, die definieren, wie der Zählerwert in eine Zeichenfolgendarstellung umgewandelt wird.

Während CSS viele nützliche vordefinierte Zählstile bietet, stellt die @counter-style At-Regel eine offene Methode bereit, um Zähler zu erstellen. Diese At-Regel berücksichtigt die Bedürfnisse der weltweiten Typografie, indem sie Autoren ermöglicht, ihre eigenen Zählstile zu definieren, wenn die vordefinierten Stile nicht den Anforderungen entsprechen.

Syntax

css

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

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

Zählstilname

<counter-style-name>: Gibt Ihrem Zählstil einen Namen. Es wird als case-sensitiver <custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nicht gleich none sein. Wie bei allen benutzerdefinierten Identifikatoren darf der Wert Ihres Zählstils kein CSS-weiter Schlüsselwort sein. Vermeiden Sie andere aufgelistete CSS-Eigenschaftswerte, einschließlich der Werte der list und counter style Eigenschaften. Der Name Ihres Zählers darf nicht den case-insensitiv list-style-type Eigenschaftswerten decimal, disc, square, circle, disclosure-open und disclosure-closed entsprechen.

Hinweis: Die nicht überschreibbaren Zählstilenamen decimal, disc, square, circle, disclosure-open und disclosure-closed dürfen 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 zum Beispiel in system: extends <counter-style-name>.

Deskriptoren

system: Gibt den Algorithmus an, der verwendet werden soll, um den ganzzahligen Wert eines Zählers in eine Zeichenfolgendarstellung 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 Zeichenfolgen, 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 in dem symbols Deskriptor angegebenen Symbole für die Konstruktion der Markerdarstellung von den meisten Algorithmen verwendet werden, bestehen additive Zählsysteme, wie z.B. römische Ziffern, aus einer Reihe von gewichteten Symbolen. Die Deskriptoren sind eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen Ganzzahlgewichten, die nach Gewicht in absteigender Reihenfolge aufgelistet sind. Dieser Deskriptor ist erforderlich, wenn der system Deskriptor auf additive gesetzt ist.
negative: Gibt Symbole an, die an die Zähldarstellung 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 Phase zur Darstellung hinzugefügt, bevor Zeichen, die durch den negative Deskriptor für negative Zählerwerte hinzugefügt wurden, hinzugefügt werden.
suffix: Gibt, ähnlich dem Präfix-Deskriptor, ein Symbol an, das an die Markerdarstellung angehängt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nachdem Zeichen hinzugefügt wurden, die durch den negative Deskriptor für negative Zählerwerte hinzugefügt wurden.
range: Definiert den Bereich von Werten, über die der Zählstil anwendbar ist. Wenn ein Zählstil verwendet wird, um einen Zählerwert darzustellen, der außerhalb der durch diesen Deskriptor definierten Bereiche liegt, fällt der Zählstil auf seinen fallback Stil zurück.
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 über 02, 03, 04 usw. gehen, dann ist der pad Deskriptor zu verwenden. Bei Darstellungen, die größer als der angegebene pad Wert sind, wird der Marker wie gewohnt konstruiert.
speak-as: Beschreibt, wie Sprachsynthesizer, wie Bildschirmleser, den Zählstil ankündigen sollen. Beispielsweise kann der Wert des Listenpunktmarkers als Zahlen oder Alphabete für geordnete Listen oder als Audiocues für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.
fallback: Gibt den Zählernamen des Systems an, auf den zurückgegriffen 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 auch der Fallback-Zähler den Wert nicht darstellen kann, wird auf den Fallback dieses Zählers zurückgegriffen, wenn einer angegeben ist. Wenn keine Fallback-Zähler beschrieben sind oder wenn die Kette von Fallback-Systemen nicht in der Lage ist, einen Zählerwert darzustellen, wird letztendlich auf den decimal Stil zurückgegriffen.

Formale Syntax

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

Beispiele

Symbole mit Zählstil spezifizieren

css

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

Die obige Zählstilregel 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 Demo-Seite (Code).

Fertige Zählstile

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

Der Zählstilkonverter zieht aus dieser Liste, um Test- und Copy-and-Paste-Code für Zählstile 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