Geschachtelte geordnete Listen mit einer fortlaufenden Nummerierung in Form von 1., 1.1, 1.1.1 usw.? Seit CSS 2 lassen sich dank der neuen CSS-Counter auch solche Arten der Aufzählung realisieren. Für ältere Browser wie dem Internet Explorer 7 müssen dabei allerdings ein paar Hürden genommen werden. Dabei sind die CSS-Counter nicht auf Listenelemente beschränkt, da gäbe es eine ganze Reihe schöner Einsatzszenarien. Wahrlich kein brandneues Thema mehr, aber ein Blick lohnt trotzdem.
Geordnete Listen
CSS-Counter erlauben das Zählen von Instanzen bestimmter Elemente bzw. Selektoren. In Kombination mit den Pseudo-Elementen :before und :after lassen sich dann ganze neue Formen der Nummerierung erstellen. Die CSS-Counter sind dabei deutlich leistungsstärker als das alte HTML start Attribut, das ohnehin als deprecated gilt, und ausschließlich die Nummerierung einer Ebene bzw. eines Listenelementes beeinflusst.
Die Nummerierung mit Hilfe von CSS basiert setzt sich aus mehreren Eigenschaften und Funktionen zusammen:
- counter-reset: Setzt einen oder mehrere Zähler zurück, ein Zähler ist dabei eine frei wählbare Variable. Optional lässt sich für jeden Zähler noch ein Anfangswert festlegen, der Standardwert ist 1.
- counter-increment: Zählt einen oder mehrere Zähler hoch, auch hier kann man über einen zweiten optionalen integeren Wert die Zählweise beeinflussen (selbst negative Werte sind erlaubt).
- content: Gibt mit Hilfe der Funktionen counter() oder counters() die Nummerierung aus.
Ein Beispiel
OL {
counter-reset: item;
}
OL LI {
display: block;
}
OL LI:before {
content: counter(item) ". ";
counter-increment: item;
}Betrachtet man dieses erste Beispiel im Browser, so sieht das Ergebnis noch nicht anders aus, als eine ganz normale geordnete Liste (OL), der einzige Vorteil liegt darin, dass sich die Nummerierung nun erheblich besser gestalten lässt, ohne dass man weitere Tag Verschachtelungen vornehmen muss. Auf einen Nachteil sei an dieser Stelle auch gleich hingewiesen. In Sachen “Accessability” sind diese Lösungen negativ zu bewerten, denn über CSS generierter Content manipuliert die DOM nicht (siehe hier), so dass aktuelle Screen-Reader diese Informationen schlicht nicht ausgeben, die Liste hätte also keine Nummerierung mehr.
Für eine fortlaufende Nummerierung, die die übergeordneten Nummern übernimmt, kann man den CSS Code wie folgt verändern:
OL {
counter-reset: item;
}
OL LI {
display: block;
}
OL LI:before {
content: counters(item, ".") ".";
counter-increment: item;
}Nun werden die Nummern der übergeordneten Listenelemente übernommen. Die Funktion counters() liefert im Gegensatz zu counter alle Instanzen eines Zählers gleichzeitig. Der zweite Parameter ist das Trennzeichen, mit dem diese Instanzen verkettet werden. Doch Vorsicht mit dieser Syntax. Sie führt im Internet Explorer 7 dazu, dass alle folgenden CSS Notationen nicht mehr interpretiert werden, selbst wenn diese in separaten Stylesheet Dateien abgelegt sind. Anscheinend bringt die Notation der Anfürhrungszeichen innerhalb der Klammern den CSS Interpreter völlig durcheinander. Bedeutet, man kann wahlweise sicher stellen, dass der entsprechende Code projektweit wirklich immer an letzter Stelle kommt, oder man nutzt die Funktion counter anstatt counters – wobei diese Lösung den CSS-Code abhängig von der möglichen Verschachtelungstiefe deutlich vergrößern kann:
/* 1. Ebene */
BODY OL {
counter-reset: level1;
list-style-type: none;
}
OL LI:before {
content: counter(level1) ". ";
counter-increment: level1;
}
/* 2. Ebene */
OL LI OL {
counter-reset: level2;
}
OL LI OL LI:before {
content: counter(level1) "." counter(level2) " ";
counter-increment: level2;
}
/* 3. Ebene */
OL LI OL LI OL {
counter-reset: level3;
}
OL LI OL LI OL LI:before {
content: counter(level1) "." counter(level2) "." counter(level3) " ";
counter-increment: level3;
}
...