An dieser Stelle wollen wir euch wieder eine interessante Neuerung aus dem Fundus rund um CSS3 vorstellen: Nummerierte Listen mit der counter-Eigenschaft.
Jeder Frontend Entwickler kennt die guten alten nummerierten Listen. Einfach ein list-style: decimal hinzufügen und die gewünschte Liste ist schön durchnummeriert. Doch was wenn diese auch noch ansprechend gestaltet werden soll? Häufig kommen Grafiker nämlich mit bunten Badges rund um Aufzählungszeichen in die Frontend-Abteilung. Dann war meist schon das Ende der Fahnenstange erreicht. Denn ähnlich wie z. B. file-inputs kann man die klassische nummerierte Liste kaum stylen - Das CSS für die Listenpunkte wird nämlich auch für die Aufzählungszeichen übernommen. Also keine individuelle Optik. Doch auch hier hat CSS3 eine Lösung für uns parat: Die counter-Eigenschaft.
Und so könnt ihr sie verwenden:
1. Liste definieren
ol {
list-style: none;
*list-style: decimal;
counter-reset: li;
}Für unsere Beispielliste setzen wir zunächst den list-style zurück. Mit Hilfe des "Star Property Hack" bekommt der IE7 eine einfache nummerierte Liste zu sehen. Außerdem wird für jede neue nummerierte Liste der counter zurückgesetzt. (counter-reset)
2.Counter anlegen
ol li:before {
content: counter(li);
counter-increment: li;
background-color: #cc0000;
font-weight: bold;
margin-right: 5px;
padding: 3px 8px;
text-align: center;
color: #FFF;
}Wichtig sind hier die ersten beiden Eigenschaften. Mithilfe des Pseudo-Selektors :before gestalten wir ein Pseudo-Element vor den jeweiligen Listenpunkten. Deren Inhalt legen wir mit der Eigenschaft content fest. In counter-increment definieren wir den Zähler. Also alle Kindelemente in der Liste. Hier sind auch alle anderen Spielereien mit HTML-Elementen denkbar. Aber sinnvoll ist es sicherlich in diesem Kontext ;-)
Außerdem muss der Zähler nicht immer um eins erhöht werden. Er wäre z. B. auch mit 3 multiplizierbar:
counter-increment: li 3;
So könnt ihr beliebige Listings darstellen.
3. Das Markup
Glücklicherweise muss am Markup nichts verändert werden, um diese neue Nummerierung einzupflegen:
<ol> <li>Berlin</li> <li>Paris</li> <li>Rom</li> <li>London</li> </ol>
Das Beispiel kann bei jsFiddle nachvollzogen werden und funktioniert auch in allen gängigen Browsern. Viel Spaß beim Gestalten der "echten" nummerierten Listen im Zeitalter von CSS3 ;-)