Effektvolles Zählen mit CSS-Countern und absoluter Positionierung

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Seit nun schon einigen Iterationen meines Blogdesigns sporten die Kommentarboxen die Anzeige der Kommentarnummer als große, aber dezente Hintergrundgrafik:

Über Twitter fragte @isellsoap gerade, wo denn der Artikel sei, in dem erklärt wird wie man sowas macht – und hier kommt er! Es gibt zwei Wege zum Ziel: der eine ist der elegante Weg, der nur CSS verwendet, der andere kommt nicht ohne zusätzliches HTML-Markup aus, funktioniert aber garantiert in allen Browsern.

Der althergebrachte Weg

In beiden Fällen ist es das Ziel, die Zahl in die rechte obere Ecke der Kommentarbox zu verfrachten und alle anderen Inhalte über diese Zahl zu legen. Ausgehend von dem Fall, dass wir alle Browser bedienen wollen, brauchen wir zunächst die Zahl an sich im HTML. In meinem Wordpress-Template ist das einfach ein span-Element:

<span class="num"><?php print $comnum++; ?></span>

Die Positionierung in der rechten oberen Ecke erreichen wir, indem wir dem Kommentar-Container eine relative Position und der Zahl selbst eine absolute Position verpassen – dann nämlich richtet sich die Zahl relativ zu den Maßen des Containers aus. Mit top und right lässt sich das span-Element in die richtige Ecke schieben:

div.comment {
    position:relative;
}
div.comment span.num {
    font-size:10em;
    position:absolute;
    top:-0.125em;
    right:0;
}

Jetzt steht die Zahl an der richtigen Stelle, überlagert aber alle anderen Elemente in der Box. Um das zu reparieren, müssen diese Elemente ebenfalls relativ positioniert werden und einen hohen Z-Index bekommen – denn der bestimmt, wie sich relativ und absolut positionierte Elemente stapeln:

div.comment p, div.comment pre, div.comment h4 {
    position:relative;
    z-index:1337; /* Höher als alle anderen Elemente */
}

Fertig! Das Problem an dieser Lösung ist nur, dass man für eine reine Design-Spielerei ein HTML-Element einbaut. Das muss nicht sein, moderne Browser vorausgesetzt.

Eine reine CSS-Lösung

In CSS2.1 ist das viel zu wenig beachtete Konzept von CSS-Countern spezifiziert, mit dem man CSS zählen lassen kann. Wir erstellen für unsere Zwecke zunächst einen Counter namens kommentare auf dem body-Element:

body {
    counter-reset:kommentare;
}

Die Eigenschaft counter-reset sorgt dafür, dass jedes Mal, wenn ein body-Element vorkommt, der in der Eigenschaft benannte Counter auf 0 gesetzt wird. Hochzählen lassen kann man einen Counter mit der Eigenschaft counter-increment und an seinen Inhalt kommt man mit der counter()-Funktion heran. Diesen Inhalt steckt man in die content-Eigenschaft eines ::after-Pseudoelements, positioniert dieses genau wie das span-Element im vorherigen Beispiel und zack – die reine CSS-Lösung funktioniert!

body {
    counter-reset: kommentare;
}
div {
    position: relative;
}
h1::after {
    content:counter(kommentare);
    counter-increment:kommentare;
    position:absolute;
    top:0;
    right:0;
}
CSS-Counter in Aktion

In Aktion ist das Ganze hier zu sehen. Der Haken an der Geschichte ist natürlich, dass nur modernere Browser CSS-Counter und die Positionierung von mit content generierten Inhalten unterstützen. Ich hatte jetzt keine Zeit für umfassendere Tests, aber in aktuellen Chrome-, Opera- und Firefox-Versionen sowie im IE9 scheint es zu funktionieren. Sofern man damit leben kann, dass fossile Surfprogramme keine Zahlen zu Gesicht bekommen, ist die zweite Methode ganz klar die bessere, denn HTML sollte in Designfragen nie konsultiert werden müssen.

Kommentare (17)

  1. Nico

    5. Mai 2011, 11:10 Uhr

    Das ist wirklich einfach und scheint ja auch in allen aktuellen Browsern zu gehen. Die Frage ist allerdings, ob die Kommentar-Nummer ein Design-Element ist oder ob sie Inhalt transportiert. Bei letzterem wäre es meines Erachtens natürlich sinnvoller die Zahl dann auch tatsächlich im HTML nieder zu schreiben…

  2. Martin

    5. Mai 2011, 11:15 Uhr

    Warum nicht einfach mit list-style-type: decimal?

  3. Peter

    5. Mai 2011, 11:15 Uhr

    Sollte man dann nicht besser gleich die Kommentarliste als <ol> umsetzen?

  4. Francesco

    5. Mai 2011, 11:17 Uhr

    Wenn man eine geordnete Liste für die Kommentare hernimmt, wird ja bereits dadurch die nötige Semantik für jeden Kommentar mitgeliefert. Also z. B. 3. Listenpunkt ist gleich 3. Kommentar, usw.

  5. Nico

    5. Mai 2011, 11:25 Uhr

    Gutes Argument! Ich bin überzeugt…

  6. Oliver Lippert

    5. Mai 2011, 11:27 Uhr

    Kommentare gehören generell in eine Liste verpackt. Warum? Ganz einfach es ist ein gebündeltes etwas. Alle Kommentare kommen der Reihe nach zu diesem Artikel dazu, aber als "Kommentar"-Komponente.
    Es sind nicht verschiedene Absätze zum Artikel oder so.

    Ist wie ne Checkliste, der füge ich auch immer eine neue Anmerkung hinzu.

    Ich glaube die Kombination von beidem wäre ziemlich gut. Also einmal OL und einmal deine CSS-Variation, wobei diese CSS-Variante halt keine alten Browser unterstützt.

  7. bazz

    5. Mai 2011, 11:32 Uhr

    Hehe, "z-index:1337" wenn da mal nicht ein alter CS'ler unterwegs ist. ;)

    Danke für den Fingerzeig auf die CSS-Counter, kannte ich bisher noch nicht.

  8. Peter

    5. Mai 2011, 11:38 Uhr

    Zitat Oliver Lippert:

    Kommentare gehören generell in eine Liste verpackt. Warum? Ganz einfach es ist ein gebündeltes etwas. Alle Kommentare kommen der Reihe nach zu diesem Artikel dazu, aber als "Kommentar"-Komponente.
    Es sind nicht verschiedene Absätze zum Artikel oder so.

    Fans von HTML5 nehmen auch gerne <article> als Kommentar-Container, ggf. noch in ein <section> eingeboxt. Wenn man die Kommentare weniger als eine Liste von Meinungen sondern als eine Serie von Ergänzungen versteht, ist das sicher auch nicht falsch.

  9. Oliver Lippert

    5. Mai 2011, 11:43 Uhr

    Hey Peter, mit HTML 5 habe ich mich leider noch nicht beschäftigt *schäm* aber die Elemente hören sich gut an :)

  10. Dirk

    5. Mai 2011, 12:20 Uhr

    Das "Zählen lassen" per <ol> ist natürlich noch ein Stückchen einfacher, jedoch wird unter Umständen die freie Positionierung der Zahl eine Qual bzw. unmöglich - zumindest wenn man es hübsch crossbrowser haben will.

    Ich habe die Zählerrei bei mir per JS eingefügt - war letztlich der einfachste Weg, auch in Verbindung mit meiner JS-Paginierung der einfachste Weg. Wäre dann wohl Variante 1a.

  11. Benjamin Kammerl

    5. Mai 2011, 13:35 Uhr

    @bazz 1337 hat wenig bis nichts mit CS zu tun.
    @peter sag mal, hat es irgendeinen besonderen Grund, dass im Screenshot ausgerechnet dieses Kommentar zu sehen ist? :P

    Ich pers. bin auch eher Fan der -Lösung gegenüber der -Lösung. Letzteres ist zwar nicht grundlegend schlecht/falsch aber ich finde OL-Tags sind für Listen bestimmt und da sollten sie auch bleiben.

    Andererseits: Soll doch jeder machen, wie er möchte hauptsache es ist nicht ganz zu abgefahren, es funktioniert und sieht gut aus.

  12. Peter

    5. Mai 2011, 13:50 Uhr

    Zitat Benjamin Kammerl:

    @peter sag mal, hat es irgendeinen besonderen Grund, dass im Screenshot ausgerechnet dieses Kommentar zu sehen ist? :P

    Da sieht man einfach sehr gut, dass die große Zahl hinter dem Rest-Text liegt.

  13. Lars Ebert

    5. Mai 2011, 14:44 Uhr

    Diese Zahlen sind eine echt coole Idee. Ich würde aber sowohl OL als auch die CSS-Nummerierung kombinieren. Das habe ich schonmal vor einiger Zeit auf meinem eigenen Blog geschrieben http://www.advitum.de/blog/2011/02/aufzahlungen-listen-webdesign-liegt-im-detail/

  14. Francesco

    5. Mai 2011, 17:07 Uhr

    Gerald Brozek hat diesen Januar auch was über Zählen mit CSS geschrieben, falls jemand Interesse hat.

  15. ixiter

    6. Mai 2011, 00:21 Uhr

    Sehr schöne Sache!
    Ob Kommentare nun Listen sind, oder Artikel in Sektionen oder was auch immer, sei einmal dahin gestellt. In jedem Fall sind es Dinger, die eine Nummer ganz gut vertragen und die vorgeschlagenen Lösungen finde ich tres chique!

    Und außerdem .. wieder was gelernt. CSS-Counter kannte ich noch nicht.
    Danke.

  16. Robert Giebel

    6. Mai 2011, 07:34 Uhr

    Ich sehe hier so viel Leute, die darüber diskutieren, ob eine Zahl irgendwo stehen soll oder nicht. Liebe Leute, Ihr habt alle so tolle Ideen, warum steckt Ihr Eure Energie nicht in produktive Tätigkeiten?
    Ganz ehrlich: Es ist so unglaublich egal, ob die Zahl nochmal irgendwo auftaucht oder nicht. Für wen macht man denn so etwas hier? Für Menschen oder für Maschinen? Ich als Mensch kann bei jedem Kommentar eine Zahl sehen.

    Los, geht raus und macht tolle Projekte! Ich will mehr WebApps da draußen sehen von Leuten, die hübsche Seiten bauen können (Wordpress-Themes gibt es schon genug, macht mal was neues) :)

  17. JÖrg

    24. Mai 2011, 12:57 Uhr

    Man könnte auch ein Hintergrundbild als "Dynamic Dummy Image" http://dummyimage.com/100x100/fff/ccc.png&text=1 verwenden. Mal von den vielen Requests abgesehen.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon