HH maczarr.de

Semantische Zitat-Quellen mit :after und content sichtbar machen

Ich bin ja ein ziemlicher Verfechter von Semantik im Frontend-Webdesign und so möchte ich immer, dass ein Frontend nicht nur gut aussieht, sondern auch der Quellcode darunter in ordentlicher Beziehung zueinander steht. Ein Problem stellten für mich bisher Zitate dar.

Mit HTML kann man Zitate mittels blockquote (längere Zitatblöcke) oder q (kurze Zitate, im Fließtext) darstellen. Um die Quelle zum Zitat anzugeben gibt es zwei Möglichkeiten: Man nutzt das zusätzliche Tag cite oder das Attribut cite.
Während im Attribut nur ein URI als Angabe erlaubt ist, kann im Tag auch beispielsweise ein Autorenname stehen.

Mein Problem

Bei dem cite-Tag ist mein Problem, dass es meiner Meinung nach außerhalb des Zitat-Tags (blockquote oder q) zu stehen hat, da es nicht direkt zum Zitat gehört, dadurch geht allerdings die Beziehung zum Zitat verloren. Prinzipiell gibt es dafür eine einfache Lösung: man verwendet das cite-Attribut im jeweiligen Zitat-Tag und damit ist der logische Bezug hergestellt, nur leider stellen Browser dieses Attribut nicht dar.

Die Lösung

Durch CSS können wir uns hier allerdings Abhilfe schaffen. Mit dem folgenden simplen CSS-Code:

blockquote[cite]:after,
q[cite]:after {
content: "Quelle: "attr(cite);
}

Nun wird ans Ende des Zitats der String "Quelle: " gefolgt von dem Wert des Attributs cite geschrieben. Das ganze dank des CSS-Selektors natürlich nur, wenn überhaupt ein cite-Attribut vorhanden ist.

Nachteile

Aktuell hat diese Methode noch zwei Nachteile: Möchte man die Zitat-Quelle unterhalb des Zitats in einer eigenen Zeile anzeigen, muss man manuell am Ende des Zitat-Tags noch einen Zeilenumbruch einfügen. Eigentlich sollte im CSS mittels "A" ein Zeilenbruch erzeugt werden können, dies scheint allerdings nirgends zu funktionieren.
Zweites Manko ist, dass der Internet Explorer dieses CSS noch nicht zu interpretieren weiß, dort also keine Quelle angezeigt wird. Hingegen der IE8 sowie die aktuellen Browser-Versionen des Firefox, Safari und Opera kommen problemlos mit dieser Variante klar.