Mozilla/Firefox Fehler

Gecko-basierte Browser wie Mozilla und Firefox besitzen eine vorbildliche und immer noch stetig wachsende Unterstützung für Webstandards. Wohl aus diesem Grunde ist mir bisher nur ein kleiner irritierender Fehler aufgefallen. Problem gelöst ^[1].

Generated Content — Das CSS content Attribut

CSS2 erlaubt Autoren über das content-Attribut Inhalte in Seiten einzufügen. Für dieses Attribut sind die folgenden Werte erlaubt:
[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Für uns ist hier nur der erste Wert von Interesse: string. Strings sind Zeichenketten, welche im Zusammenhang mit CSS sämtliche Zeichen, welche in dem durch den in einer @charset-Regel festgelegten Zeichensatz enthalten sind, beinhalten dürfen. Der default-Zeichensatz bei keiner Angabe ist US-ASCII, d.h. mit Ausnahme von Zeichen, welche für die CSS-Syntax von Bedeutung sind, wie Anführungszeichen oder Klammern, sind die Zeichen 32_dez (20_hex) bis 126_dez (7E_hex) erlaubt. Würde in einer @charset-Regel der iso-8859-1 Zeichensatz festgelegt worden sein, wären auch noch die Zeichen 160_dez (A0_hex) bis 255_dez (FF_hex) erlaubt, welche beispielsweise die deutschen Umlaute enthalten. Aber was ist nun mit denjenigen Zeichen, welche in keinem der »gewöhnlichen« Zeichensätze vorkommen, beispielsweise Mathematische Operatoren oder Dingbats?

Solche Zeichen sind Bestandteil von UTF-8 und sollten über ihre numerische Kodierung im Stylesheet eingebunden werden können. Die Syntax für diese Integration ist eine andere als bei HTML, welches die Delimiter & und ; benutzt. In CSS werden die hexadezimalen Kodierungen mittels eines linksseitigen Schrägstriches — backslash — \ maskiert. Hierbei folgt entweder ein Leerzeichen der hexadezimalen Kodierung, oder der Zahlencode wird linksseitig mit Nullen bis zu einer Gesamtlänge von sechs Stellen aufgefüllt.

Betrachten wir als Beispiel das COPYRIGHT-Zeichen ©. Sein hexadezimaler Code ist A9, somit läßt es sich in Stylesheets nach einer der beiden folgenden Schemata einbinden:

Maskierung gefolgt von einem Leerzeichen:

content: '\A9 ';

Linksseitiges Auffüllen auf 6 Stellen:

content: '\0000A9';

Nun würde ich gerne auf meinen Seiten jeden besuchten Verweis mit einem nachgestellten Häkchen, dem CHECK MARK (codepoint 10003_dec, 2713_hex) ✓ kennzeichnen. Dieses sollte einfach mittels folgender Zeile zu bewerkstelligen sein:

a:visited::after { content: '\002713'; }

Dies ist alles sehr schön und einfach, aber zu meinem großen Ärgernis erlauben die Gecko-Browser (aber auch Opera) tatsächlich nur die Einbindung des erweiterten ASCII-Zeichensatzes bis Codepoint FF für das content-Attribut in Stylesheets. Glücklicherweise erlaubt Opera aber auch die Benutzung der aus HTML üblichen Referenzierung mittels Delimitern:

a:visited::after { content: '✓'; }

Während die Gecko-Browser diesen String wörtlich und buchstäblich korrekt interpretieren, wird der String in Opera erst in das entsprechende Zeichen umgewandelt und dann falsch als CHECK MARK dargestellt.

Da es keine saubere Lösung zu geben scheint und ich das Zeichen nicht als Bild einbinden möchte, besteht meine Ausweichlösung darin, in Gecko-Browsern den String '[x]' an besuchte Verweise anzuhängen. Dies ist sicherlich keine ideale Lösung aber zweifelsohne besser, als wenn das content- Attribut überhaupt nicht gerendert würde.

• Auftreten obigen Verhaltens: im CSS content-Attribut.
  Beachte bitte, das das quotes-Attribut hiervon nicht betroffen ist. Bei Letzterem wird jegliche Hexadezimalkodierung problemlos als das entsprechende Zeichen dargestellt.

Zutreffend auf:

Aktualisierung: Das beschriebene Verhalten tritt nicht auf, wenn dieses Attribut nicht mit einer Fülle anderer Stylesheet-Regeln vermischt wird, wie es bei meinen Stylesheets geschieht. Ein Kontrolltest demonstriert, dass die Gecko Browser sich in Abwesenheit weiterer komplexer Stylesheet-Regeln korrekt verhalten.

Problem gelöst

Das Verhalten, welches ich bemerkte, wurde tatsächlich nicht durch irgendwelche CSS-Regeln hervorgerufen, sondern war auch die PHP-Konstruktion echo zurückzuführen. Die problematische Zeile ist: <?php echo ("a:visited::after { content: '\002713'; }");?> Nachdem ich im PHP-Handbuch über echo gelesen hatte, wurde mir gewahr, dass dieser Befehl zwischen einfachen und doppelten Anführungszeichen unterscheidet. Variablen innerhalb doppelter Anführungszeichen werden erst berechnet bevor sie zurückgegeben werden wohingegen innerhalb einfacher Anführungszeichen keine Auswertung erfolgt sondern der Name buchstäblich zurückgegeben wird. Diese Regel trifft offensichtlich nicht nur auf Variablen sondern auch auf maskierte Zeichen zu. Die einfache Lösung für das Problem war also die Anführungszeichen zu tauschen: <?php echo ('a:visited::after { content: "\002713"; }');?>