Zeichenkodierung - CSS

1. Die Abschnitte

• Einführung
• Das Grundproblem
• HTML
• CSS
• MySQL Teil 1
• MySQL Teil 2
• PHP
• PHP und HTML

2. Wozu

... muss man denn eigentlich CSS-Dateien eine spezielle Kodierung verpassen? Das fragen sich jetzt sicher etliche von euch. Und das ist auch völlig berechtigt. Denn normalerweise ist es völlig lattens, wenn man die CSS-Datei als ANSI ausliefert. Aber einen Sonderfall gibt es schon. Unter dem Punkt Benamung habe ich euch den Tipp gegeben, bei Dateien niemals mit Leerzeichen oder zum Beispiel deutschen Umlauten zu arbeiten. Denn wenn man sich daran nicht hält, so bekommt man Probleme.

3. Der Fall

... kann bei CSS nur dann eintreten, wenn man Hintergrundbilder einbindet, die zum Beispiel über deutsche Sonderzeichen verfügen. Öffnet dazu mal im Ordner css die beiden Dateien css.htm und styles.css. Wenn ihr euch nun die HTML-Datei im Browser anschaut, dann sieht alles normal aus.

Aber!

Jetzt ändert in der css.htm die Kodierung von ANSI auf UTF-8 und passt auch das charset entsprechend an! Dann ist nämlich schwuppdiwupp das Hühnchen weg.

4. Das Problem

Schaut euch mal die Kodierung der styles.css an. Denn die ist ANSI. Und das Problem ist einzig und allein das blöde "ü" im Dateinamen. Nun kann man das Bild zum Beispiel in huhn.jpg umbenennen und das in der CSS-Datei entsprechend anpassen. Aber es gibt eine andere Möglichkeit.

5. Die Lösung

Die Kodierung der styles.css muss auf UTF-8 (ohne BOM) umgestellt werden. Nur leider wird dann aus dem "ü" ein "xFC". Denn das ANSI-ü ist nicht identisch mit dem ü in UTF-8. Also löscht die drei Zeichen und tippt dafür ein "ü" ein. Dann passt es wieder.

Und anders herum

Jetzt ändert ihr die Kodierung von der css.htm von UTF-8 wieder zu ANSI und gebt beim charset ein ISO-8859-1 an. Also den Standard für westeuropäische Sprachen. Und wieder ist das blöde Huhn weg. Also was macht man jetzt nun? Genau, man muss auch die styles.css entsprechend wieder umkodieren.

6. Schlussfolgerung

So lange man bei Stylesheet-Angaben strikt auf Sonderzeichen verzichtet, ist es eigentlich egal, über welche Kodierung die Datei verfügt. Denn die Buchstaben von A bis Z und die Zahlen von 0 bis 9 des ANSI-Codes sind eine Teilmenge von UTF-8. Unsere Umlaute nicht! Also denkt immer daran, dass ihr eure Bildnamen nicht mit Sonderzeichen versaut.

7. Noch zwei Hinweise

Angabe des Zeichsatzes

Um auf Nummer sicher zu gehen, sollte man bei einer UTF-8-Kodierung zusätzlich im Kopf der CSS-Datei noch folgende Angabe machen. Das ist nach meinen bisherigen Erfahrungen nicht unbedingt nötig, aber wenn es mal kracht, so kann das auf jeden Fall helfen.

@charset "UTF-8";

Der Internet Explorer

Dieses Verhalten habe ich bisher nur einmal erlebt, aber es hatte gravierende Auswirkungen. Eine PHP-Datei (mit HTML-Code) war UTF-8-kodiert, die eingebundene CSS-Datei nicht. Und da hatte sich mitten im Code ein "Backtick" eingeschlichen, also das obere Zeichen auf der Taste neben dem "ß". Dabei handelte es sich dann um einen "illegal character", also einem Zeichen, dass nicht der Spezifikation entspricht.

Und was hat nun der Internet Explorer (in allen Versionen) gemacht. Der hat sich wohl gedacht, das kenne ich nicht, da kann ich nichts mit anfangen, also ist hier Schluss mit Arbeiten. Und so wurde der gesamte restliche Code komplett(!) ignoriert. Wie das Ergebnis aussah, könnt ihr euch wohl vorstellen. In dem Augenblick dachte ich, dass der IE wohl von Verwaltungsbeamten programmiert worden ist.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt