Stil mit {stil}

Dez 2007

CSS counter-reset • Zurücksetzen von CSS-generierten Zählern

Die CSS-Eigenschaft counter-reset ist eine Liste von einem oder mehreren Paaren von identifier und number, die durch Leerzeichen voneinander getrennt sind und einem Selektor zugewiesen sind. Jedes Paar setzt den numerischen Wert des Zählers auf den Wert number zurück, wenn der spezielle Selektor vorgefunden wird. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf Null zurückgestellt.

Auf diese Weise können aufeinander folgende Kapitel, Unterkapitel und Bilder mit 1.0, 1.1, 1.2 ... fortlaufend nummeriert werden.

Beispiel: Kapitel hierarchisch nummerieren

Der folgende Beispielcode vom W3C nummeriert Kapitel als 1, 1.1, 1.1.1 usw.

ol { counter-reset: item; font-family: serif; }
ol li { display: block; }
ol li:before { content: counters(item, "."); counter-increment:item; }
…
<ol>
   <li> background und color – Stile für … 
      <ol>
         <li> color </li>
         <li> background </li>
      </ol>
   </li>
   …
   <li> content – Stile für … 
      …
   </li>
</ol>

1. background und color – Stile für die Vorder- und Hintergrundfarben und -bilder
   1. color
   2. background
2. border – Stile für die Gestaltung eines Rahmens um ein Element
   1. border-top-color
   2. border-right-color
   3. border-bottom-color
   4. border-left-color
3. content – Stile für automatisch generierten Inhalt
   1. content
   2. counter-increment
   3. counter-reset
   4. quotes

Und so sollte aussehen, wenn der Browser counter-reset unterstützt:

Screenshot: Geordnete Liste mit Unterlisten in Opera 7

open-quotes
close-quotes
no-open-quotes
no-close-quotes

FF2 Op7 CSS2 Erblich: Ja

blockquote p { quotes: '»' '«'; }
blockquote p:before {
   content: open-quote;
}

blockquote p:after {
   content: close-quote;
}
… 
<blockquote>
   <p>Ein Kamel ist ein Pferd, 
      das von einem Ausschuss entworfen wurde.</p>
</blockquote>

Ein Kamel ist ein Pferd, das von einem Ausschuss entworfen wurde.

Und so sollte es aussehen, wenn der Browser die Eigenschaften open-quotes / close-quotes unterstützt:

»Ein Kamel ist ein Pferd, das von einem Ausschuss entworfen wurde.«

Wenn die display-Eigenschaft eines Elements mit none angegeben ist, kann der Zähler nicht zurückgesetzt werden. Wenn die visibility-Eigenschaft eines Elements mit hidden angegeben ist, kann der Zähler zurückgesetzt werden.

counter-reset

FF2 O5+ S3 CSS2 Erblich: Nein

counter-reset

Werte

[ <identifier> <integer>? ]+ | none | inherit

none

none ist die Voreinstellung und verhindert, dass der Zähler zurückgesetzt wird.

identifier integer

Der Identifier-Wert des Wertepaares ist zwingend erforderlich und identifiziert den Zähler. Er kann durch eine Klasse, eine id oder durch einen Selektor angesprochen werden. Der optionale numerische Wert ist der Wert, auf den der Zähler zurückgesetzt wird, wenn der spezifische Selektor vorgefunden wird. number kann positive und negative Werte annehmen. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf "0" zurückgesetzt.