58.
Zählen mit CSS (Counter) (03.07.2001)
In der Spezifikation von CSS2 sind Definitionen für Counter vorgesehen. Diese dienen aber nicht zur Zählung der Site-Besucher, sondern können zur automatischen Nummerierung
verwendet werden. Gezählt wird damit das Auftreten bestimmter Elemente innerhalb des Dokuments. Die Definition eines Counters erfolgt mittels der Content-Eigenschaft, wobei eine Zählvariable
instanziiert wird. Durch Counter-Increment kann eine definierte Variable um einen bestimmten Betrag herauf gesetzt werden. Sollte es notwendig sein, einen Counter zurückzusetzen, steht
Counter-Reset zur Verfügung.
Im folgenden Beispiel 58 wird eine Überschriftenstruktur simuliert (z. B. als Gliederung denkbar). Kapitelüberschriften werden mit H1- und ihre Unterpunkte mit H2-Tags ausgezeichnet.
Dabei kommt noch das Pseudoelement :before zur Anwendung, welches die ermittelten Zahlenwerte vor die Texte platzieren soll. Analog dazu existiert :after zum Nachstellen von Inhalten.
Innerhalb der Content-Definition kann neben dem Counter auch anderer Text in Anführungszeichen stehen. Hier werden nach dem Counter Leerzeichen bzw. ein Trennpunkt eingefügt. Die Variable varCounter1 wird bei jedem H1 um 1 erhöht.
Da die Werte für die Unterkapitelüberschriften jeweils bei .1 beginnen sollen, muss der H2-Counter (in Gestalt der Variable varCounter2) beim Auffinden einer Hauptüberschrift wieder zurückgesetzt werden.
Schließlich werden bei H2:before die Werte für Haupt- und Unterkapitel zusammengesetzt.
CSS:
H1:before
{
Content: Counter(varCounter1) " ";
Counter-Increment: varCounter1 1;
Counter-Reset: varCounter2;
}
H2:before
{
Content: Counter(varCounter1) "." Counter(varCounter2) " ";
Counter-Increment: varCounter2 1;
}
HTML:
<H1>Kapitelname</H1>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
<H1>Kapitelname</H1>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
<H1>Kapitelname</H1>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
<H2>Unterkapitelname</H2>
Zurzeit kann nur Opera 5.x mit diesem 3 Jahre alten "Zukunfts-Feature" aufwarten. Andere Browser zeigen nur die Überschriften ohne numerische Gliederung an.
|