Das Problem des <q>-Elements ist kein neues. Obwohl es steinalt ist, können es noch lange nicht alle Browser so verarbeiten wie es sein sollte. Eigentlich sollte es möglich sein, dem Element mit der CSS-Eigenschaft quotes Anführungszeichen zu verpassen, aber besonders Internet Explorer und Safari können dies aus irgendwelchen Gründen nicht ohne dass man etwas nachhilft. Für diesen Artikel wurden funktionierende Lösungen für beide Browser zusammengetragen.

Wie es funktionieren sollte

Normalerweise sollte die Zuweisung von Anführungszeichen für <q> wie folgt aussehen:

q { quotes:"0BB" "0AB" "203A" "2039"; }
  q:before { content:open-quote; }
  q:after { content:close-quote; }

In der quotes-Eigenschaft von q wird notiert, welche Anführungszeichen verwendet werden sollen. In diesem Fall sind das » als öffnendes und « als schließendes Zeichen sowie › und ‹ als Anführungszeichen für Zitate in Zitaten. Platziert und mit Styles versehen wird das Ganze in q:before und q:after.

Mit Attributselektoren wie z.B, body[lang=de] q, body[lang=en] q usw. lassen sich so (bei Bedarf) bequem viele unterschiedliche Systeme von Anführungszeichen definieren, aber trotzdem einheitlich gestalten. Soweit die Theorie.

Safari

In der Realität ist es jedoch so, dass Safari (laut Hersteller The world’s best browser) schlichtweg quotes nicht versteht, wie mike zu berichten weiß. Will man dem Apple-Browser trotzdem Anführungszeichen verpassen, kommt man nicht umhin, diese direkt in in q:before und q:after zu notieren.

q:before { content:"0BB"; }
q:after { content:"0AB"; }
  q q:before { content:"203A"; }
  q q:after { content:"2039"; }

So bedient man zumindest bis zu einmal verschachtelte <q>-Elemente.

Internet Explorer

Die Internet Explorer der Versionen 6 und 7 machen es uns besonders schwer, da sie nicht nur wie Safari quotes nicht verstehen, sondern auch mit den Pseudoklassen :before und :after nichts anzufangen wissen. Da führt kein Weg an Scripts vorbei - zum Glück gibt es so etwas bei willCode4Beer.com.

Der erfahrene CSS-Nerd weiß, dass eine solche htc-Datei einfach hochgeladen und mit der IE-Eigenschaft behavior in einen Stylesheet eingebunden werden muss. Das könnte zum Beispiel so aussehen:

q { behavior:url(fixQuotes_en.htc); }

Mehr ist nicht zu tun. In den Zeilen 9 und 10 der htc-Datei kann man fast wie in CSS festlegen, welche Anführungszeichen verwendet werden sollen.

Und jetzt ist alles bestens?

Mit diesen Lösungen kann man zwar beiden Browsern Anführungszeichen aufzwingen, aber richtig optimal sind beide Lösungen nicht. Für die Safari-Lösung muss man zumindest mehr CSS-Code aufwenden um zum gleichen Endergebnis wie quotes zu kommen.

Die Methode für den Internet Explorer hat das große Manko, dass htc-Dateien eben Scripts sind; stellt ein IE-Nutzer Javascript aus, gibt es für ihn keine Anführungszeichen. Mit validem CSS hat die behavior-Eigenschaft selbstverständlich auch nicht viel zu tun und eigene Styles kann man diesen Anführungszeichen ebenfalls nicht auf den Weg geben.

Aber am Ende hat man doch lieber solch hingewürgte Zeichen als gar keine. Wie man überhaupt richtig Anführungszeichen setzt, sagt euch dieser Artikel.