CSS counter-increment – Referenz, Beispiel und Labor

stylesheet.css · counter-increment

.probe {
  counter-increment: item;
}

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

berechneter Wertcounter-increment: item

Box-Breite–

Box-Höhe–

Erläuterungen

Die Eigenschaft counter-increment dient dazu, einen oder mehrere benannte Zähler um einen gegebenen Wert zu inkrementieren. Wenn sich diese Eigenschaft auf einen Zähler bezieht, der nicht vorher durch counter-reset zurückgesetzt wurde, wird davon ausgegangen, dass er auf 0 gesetzt ist.

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-increment'
[ <identifier> <integer>? ]+ | none | inherit

<identifier> <integer>: Name des Zählers und Inkrementalwert. Der Inkrementalwert ist optional und voreingestellt auf 1. 0 und negative Werte sind erlaubt.
none (Ausgangswert): Kein Zähler wird dargestellt.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Code-Beispiel

(Der CSS-2.1-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-increment 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-reset

Wann der Zähler wächst

Zähler werden in der Reihenfolge des Dokuments verarbeitet, und jedes Element, auf das die Deklaration zutrifft, erhöht den Zähler genau einmal. Die Erhöhung geschieht, bevor der über :before erzeugte Inhalt dieses Elements ausgegeben wird; die erste Überschrift zeigt deshalb die 1 und nicht die 0.

Daraus folgt, dass die Erhöhung an das Element gebunden ist und nicht an die Stelle, an der die Zahl erscheint. Beide fallen im üblichen Beispiel zusammen, weil dieselbe Regel beides festlegt. Sie lassen sich aber trennen: ein Element kann einen Zähler erhöhen, ohne ihn auszugeben, und ein anderes kann ihn ausgeben, ohne ihn zu erhöhen.

Mehrere Zähler in einer Deklaration werden von links nach rechts abgearbeitet. Name und Schrittweite stehen paarweise, und ohne Zahl gilt der Schritt 1.

Der Zähler, den niemand angelegt hat

Die Seite nennt eine Regel, deren Folgen weiter reichen als ihre Formulierung: Wird ein Zähler erhöht, der nie zurückgesetzt wurde, gilt er als auf 0 stehend. Es gibt also keinen Fehler und keine Warnung, sondern stillschweigend einen neuen Zähler.

Praktisch heißt das, dass ein Schreibfehler im Namen nicht auffällt. Wer an einer Stelle kapitel zurücksetzt und an einer anderen Kapitel erhöht, hat zwei Zähler, denn Namen unterscheiden Groß- und Kleinschreibung. Die Nummerierung beginnt dann an jeder Stelle bei 1, ohne dass etwas darauf hinweist.

Bequem ist die Regel trotzdem. Für eine einfache, durchgehende Nummerierung im ganzen Dokument genügt das Erhöhen allein, das Zurücksetzen kann entfallen. Nötig wird es erst, sobald die Zählung irgendwo neu beginnen soll.

Null, negative Schritte und ihr Nutzen

Als Schrittweite sind auch 0 und negative Zahlen erlaubt. Beide sehen zunächst nach einem Fehler aus und haben ihre Anwendung.

Der Schritt 0 lässt den Zähler unverändert. Das ist nützlich, wenn eine Regel für eine ganze Gruppe von Elementen gilt und einzelne davon ausgenommen werden sollen, ohne die Deklaration zu entfernen: sie zählen mit, ohne weiterzuzählen. Ein Beispiel ist eine Zwischenüberschrift, die keine eigene Nummer bekommt, aber im Nummerierungszusammenhang steht.

Negative Schritte zählen rückwärts. Anwendungen sind selten, etwa eine Rangliste, die von der höchsten Zahl abwärts läuft, oder ein Countdown. Öfter ist ein negativer Schritt der stille Hinweis auf einen Denkfehler, weil sich eine rückwärts laufende Nummerierung meist einfacher aus der Struktur des Dokuments ableiten lässt als aus einer negativen Zählung.

Zu beachten ist außerdem, dass sich mehrere Deklarationen an demselben Element nicht summieren. Es gilt die Regel, die sich in der Kaskade durchsetzt, und alle anderen entfallen. Wer einen Zähler in zwei Schritten erhöhen will, braucht dafür zwei Elemente.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0.

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-increment