Dieser Artikel ist Teil einer Serie:

  1. CSS-Counter
  2. Border-Image
  3. Box-Shadow
  4. Box-Si­zing
  5. Die Rückkehr der Tabellen
  6. CSS-Transforms
  7. Die Appearance-Eigenschaft
  8. Der General Sibling Com­bi­na­tor
  9. font-size-adjust
  10. Farben mit RGBA und HSL(A)
  11. Schat­ten­ef­fek­te

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.