@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-rule ermöglicht es Ihnen, vordefinierte Listenstile zu erweitern und Ihre eigenen 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 Zeichenfolgenrepräsentation umgewandelt wird.

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

Syntax

css

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

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

Zählerstil-Name

<counter-style-name>: Bietet einen Namen für Ihren Zählerstil. Er wird als case-sensitiver <custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nicht none sein. Wie bei allen benutzerdefinierten Identifikatoren 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 kann nicht die case-insensitiven list-style-type Eigenschaftenwerte von decimal, disc, square, circle, disclosure-open und disclosure-closed sein.

Hinweis: Die nicht überschreibbaren Zählerstilenamen 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 Datentyp <counter-style-name> erwartet wird, z. B. bei system: extends <counter-style-name>.

Deskriptoren

system: Gibt den Algorithmus an, der zur Umwandlung des ganzzahligen Werts eines Zählers in eine Zeichenfolgenrepräsentation verwendet wird. 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: Bestimmt die Symbole, die für die Markierungsdarstellungen verwendet werden sollen. Symbole können Zeichenfolgen, Bilder oder benutzerdefinierte Identifikatoren enthalten. Dieser Deskriptor ist erforderlich, wenn der Deskriptor system auf cyclic, numeric, alphabetic, symbolic oder fixed gesetzt ist.
additive-symbols: Definiert die additiven Tupel für additive Systeme. Während die Symbole, die im Deskriptor symbols angegeben sind, zur Konstruktion der Markierungsdarstellung durch die meisten Algorithmen verwendet werden, bestehen additive Zählsysteme, wie römische Ziffern, aus einer Reihe gewichteter Symbole. Der Deskriptor ist eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen ganzzahligen Gewichten, geordnet nach absteigender Gewichtung. Dieser Deskriptor ist erforderlich, wenn der Deskriptor system auf additive gesetzt ist.
negative: Gibt Symbole an, die der Zählerdarstellung angefügt oder vorangestellt werden, wenn der Wert negativ ist.
prefix: Gibt ein Symbol an, das der Markierungsdarstellung vorangestellt werden soll. Präfixe werden der Darstellung in der Endphase hinzugefügt, vor allen Zeichen, die von dem Deskriptor negative zu negativen Zählerwerten hinzugefügt werden.
suffix: Gibt, ähnlich zum Präfixdeskriptor, ein Symbol an, das der Markierungsdarstellung angefügt wird. Suffixe folgen auf die Markierungsdarstellung, einschließlich aller Zeichen, die von dem Deskriptor negative zu negativen Zählerwerten hinzugefügt werden.
range: Definiert den Wertebereich, über den der Zählerstil anwendbar ist. Wenn ein Zählerstil zur Darstellung eines Zählerwerts verwendet wird, der außerhalb der von diesem Deskriptor definierten Bereiche liegt, fällt der Zählerstil auf seinen fallback-Stil zurück.
pad: Wird verwendet, wenn Sie möchten, dass die Markierungsdarstellung eine Mindestlänge haben. Wenn Sie beispielsweise möchten, dass die Zähler bei 01 beginnen und durch 02, 03, 04 usw. weitergehen, dann ist der Deskriptor pad zu verwenden. Bei Darstellungen, die größer als der angegebene pad-Wert sind, wird die Markierung normal konstruiert.
speak-as: Beschreibt, wie Sprachausgaben, wie Bildschirmleseprogramme, den Zählerstil ankündigen sollen. Zum Beispiel kann der Wert des Eintragsmarkierers für geordnete Listen als Zahlen oder Alphabete vorgelesen werden oder als Audiowiedergabe für ungeordnete Listen, basierend auf dem Wert dieses Deskriptors.
fallback: Gibt den Zählernamen des Systems an, auf das zurückgegriffen werden soll, wenn entweder 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 auch der Fallback-Zähler den Wert nicht darstellen kann, wird dessen Fallback verwendet, falls einer angegeben ist. Wenn keine Fallback-Zähler beschrieben sind oder die Kette von Fallback-Systemen einen Zählerwert nicht darstellen kann, dann fällt sie letztendlich auf den decimal-Stil zurück.

Formaler Syntax

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

Beispiele

Symbole mit counter-style angeben

css

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

Die obige Zählerstil-Regel kann auf Listen wie folgt 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>

Siehe weitere Beispiele auf der Demo-Seite (Code).

Vorgefertigte Zählerstile

Finden Sie eine Sammlung von über 100 counter-style-Code-Schnipseln in dem Dokument Vorgefertigte Zählerstile. Dieses Dokument bietet Zähler, die den Anforderungen von Sprachen und Kulturen weltweit gerecht werden.

Der Counter styles converter zieht aus dieser Liste, um Test- und Kopiercode für Zählerstile 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