CSS counter-reset – Referenz, Beispiel und Labor

stylesheet.css · counter-reset

.probe {
  counter-reset: item;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertcounter-reset: item

Box-Breite–

Box-Höhe–

Erläuterungen

Die Eigenschaft counter-reset dient dazu, einen oder mehrere benannte Zähler auf einen gegebenen Wert einzustellen.

Die Eigenschaft gehört zum Kapitel über die automatische Nummerierung und ist in CSS 2.1 enthalten. Zur Entstehungszeit dieser Seite setzte sie noch nicht jeder verbreitete Browser um.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'counter-reset'
[ <identifier> <integer>? ]+ | none | inherit

<identifier> <integer>: Name des Zählers und Inkrementalwert. Der Inkrementalwert ist optional und voreingestellt auf 0.
none (Ausgangswert): Kein Zähler wird dargestellt.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

(Der CSS2-Spezifikation entnommen)

H1:before {
content:"Kapitel " counter(Kapitel) ". ";
counter-increment:Kapitel;  /* Add 1 to Kapitel */
counter-reset:Abschnitt;      /* Set Abschnitt to 0 */
}

Browserunterstützung

: Die Eigenschaft counter-reset wird mit einer Ausnahme von keinem der modernen Browser unterstützt.
Opera 7+: Der Opera-Browser verarbeitet sowohl die Eigenschaft counter-reset als auch counter-increment.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

content, counter-increment

Der Geltungsbereich eines Zählers

Ein Zähler entsteht nicht durch seine Benutzung, sondern durch das Zurücksetzen. Das Element, an dem counter-reset steht, spannt einen Bereich auf, in dem der Zähler gilt: es selbst, alle seine Nachfahren und alle nachfolgenden Geschwister samt deren Nachfahren. Außerhalb dieses Bereichs existiert der Zähler nicht.

Steht dieselbe Anweisung an einem tiefer liegenden Element noch einmal, entsteht dort ein neuer Zähler gleichen Namens, der den äußeren für die Dauer seines Bereichs verdeckt. Damit lassen sich verschachtelte Nummerierungen aufbauen, ohne für jede Ebene einen eigenen Namen zu erfinden: jede Ebene setzt denselben Namen zurück und bekommt ihre eigene Zählung.

Für die Ausgabe gibt es deshalb zwei Formen. Die einfache Form nennt den Wert des innersten sichtbaren Zählers. Die zweite Form sammelt die Werte aller verschachtelten Zähler desselben Namens ein und verbindet sie mit einem angegebenen Trennzeichen, woraus sich Nummerierungen der Art 2.3.1 ergeben.

Zurücksetzen heißt nicht Nullsetzen

Die Zahl hinter dem Namen ist der Wert, auf den der Zähler gesetzt wird, und ohne Angabe ist das 0. Sie beschreibt also einen Startpunkt und keinen Schritt. Weil ein Zähler üblicherweise vor der Ausgabe noch erhöht wird, erscheint als erste Nummer die 1.

Wer bei einer anderen Zahl beginnen will, rechnet vom Schritt zurück: für einen Anhang, der bei 7 beginnt, wird auf 6 zurückgesetzt. Negative Werte sind zulässig, und mehrere Zähler lassen sich in einer Deklaration nennen, indem Name und Zahl paarweise aufeinanderfolgen.

Oft steht das Zurücksetzen an einem anderen Element als das Erhöhen. Im Beispiel dieser Seite setzt die Kapitelüberschrift den Abschnittszähler zurück und erhöht zugleich den Kapitelzähler. So beginnt die Abschnittsnummerierung in jedem Kapitel von vorn, ohne dass irgendwo eine Zahl fest im Stylesheet steht.

Der Stand von damals und der von heute

Die Zähler sind nicht aus dem Standard verschwunden; sie stehen im Kapitel über die automatische Nummerierung von CSS 2.1. Was zur Entstehungszeit dieser Seite fehlte, war die Umsetzung in einem verbreiteten Browser. Das hat sich lange danach geändert, und heute gehören Zähler zum umgesetzten Bestand.

Hinzugekommen ist inzwischen eine dritte Eigenschaft, mit der sich ein Zähler auf einen Wert setzen lässt, ohne einen neuen Geltungsbereich aufzuspannen. Der Unterschied ist genau der, an dem sich das Verhalten dieser Seite verstehen lässt: das Zurücksetzen erzeugt einen Zähler, das Setzen verändert einen bestehenden.

Anwendungsfälle gibt es über die Kapitelnummerierung hinaus reichlich: durchnummerierte Abbildungen mit Verweisen im Text, Fußnoten, Schritte einer Anleitung, Zeilennummern in Codebeispielen. Allen gemeinsam ist, dass die Zahlen aus der Struktur des Dokuments entstehen und beim Umstellen von selbst richtig bleiben.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: none
Berechneter Wert: Spezifizierter Wert
Vererbung: Nein
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Alle

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft counter-reset