Angabe der Zeichencodierung in CSS

Frage

Wie gibt man die Zeichencodierung in einem CSS-Stylesheet an?

Wenn Sie Text in Ihrem Stylesheet haben, der Nicht-ASCII-Zeichen enthält (z.B. in Namen von Schriftarten, in Werten für die content-Eigenschaft, in Selektoren usw.), dann müssen Sie sicherstellen, dass der CSS-Parser weiß, wie er die Bytes in Zeichen umsetzen muss, damit er Ihren CSS-Code versteht. Dieser Artikel beschreibt, wie Sie das umsetzen.

Kurze Antwort

Sie sollten immer UTF-8 als Zeichencodierung für Ihre Stylesheets und HTML-Seiten verwenden und diese Zeichencodierung in HTML angeben. Wenn Sie das tun, ist es nicht notwendig, die Zeichencodierung des Stylesheets anzugeben.

Andere Ansätze sind nur dann notwendig, wenn Ihr Stylesheet Nicht-ASCII-Zeichen enthält und Sie aus irgendwelchen Gründen nicht darauf bauen können, dass das HTML und das zugehörige Stylesheet in derselben Zeichencodierung codiert sind. In diesem Fall sollten Sie @charset oder HTTP-Header verwenden, um die Zeichencodierung anzugeben. (Wenn Ihre HTML- und CSS-Dateien in derselben Zeichencodierung codiert sind, wenden die aktuellen Versionen der gängigen Browser die Codierung der HTML-Datei auch auf das Stylesheet an.)

Details

Verwendung von @charset

Wie bereits gesagt, sollten Sie das nur verwenden, wenn das Stylesheet und die aufrufende HTML-Datei in unterschiedlichen Zeichencodierungen codiert sind.

Es ist wichtig zu verstehen, dass die Angabe @charset zwar wie eine CSS-At-Regel aussieht, aber zur Erkennung der Zeichencodierung nicht als solche geparst wird. Nur eine bestimmte Bytesequenz, beginnend mit dem allerersten Byte des Stylesheets, ist wirksam. Variationen, auch solche, die eine gültige At-Regel darstellen würden, werden stillschweigend ignoriert.

Um die Zeichencodierung innerhalb des Stylesheets anzugeben, verwenden Sie folgende Folge von Bytes (abgesehen von charset-name; ein Byte je Zeichen) ganz am Anfang der Datei:

@charset "charset-name";

charset-name ist nicht case-sensitiv und sollte für neue Stylesheets immer utf-8 sein. Wenn Sie wirklich nicht UTF-8 für Ihr Stylesheet verwenden können, lesen Sie den Abschnitt Andere Zeichencodierungen als UTF-8 weiter unten.

Die Bytefolge @charset darf nur einmal in einem externen Stylesheet vorkommen und muss ganz am Anfang stehen. Es dürfen keine Zeichen davor stehen, auch keine Kommentare.

Beachten Sie, dass es nicht genügt, einfach @charset "utf-8"; am Anfang des Stylesheets anzugeben – Sie müssen Ihr Stylesheet auch UTF-8-codiert speichern. (Siehe Die Zeichencodierung auf den Inhalt anwenden.)

Beachten Sie: Da der HTTP-Header höhere Priorität als eine @charset-Angabe innerhalb des Dokuments hat, sollten Sie immer beachten, ob die Zeichencodierung bereits im HTTP-Header angegeben ist. Wenn das der Fall ist, muss @charset auf dieselbe Zeichen­codierungs­angabe gesetzt werden. Sie hat nur dann einen Effekt, wenn das Stylesheet in einem Kontext gelesen wird, wo es keinen HTTP-Header gibt (z.B. von der lokalen Festplatte).

Im Verzeichnis der Techniken finden Sie eine Reihe von Links, die Ihnen helfen zu erkennen, ob eine Zeichen­codierungs­angabe im HTTP-Header gesendet wird.

Was ist mit dem BOM?

Laut CSS3-Syntax-Spezifikation sollte ein Browser, wenn ein UTF-8-BOM (byte-order mark) am Anfang der Datei steht, das Stylesheet als UTF-8-codiert behandeln – ungeachtet anderer Angaben zur Zeichencodierung. Zum Zeitpunkt des Erscheinens des Artikels ist das jedoch nicht einheitlich umgesetzt; Internet Explorer 10 und 11 geben HTTP-Headern und @charset-Angaben immer noch höhere Priorität.

Gegenwärtig sollten Sie deshalb @charset oder HTTP-Header verwenden. Das erste hat den zusätzlichen Vorteil, dass es denen, die sich den Quellcode ansehen, hilft sich zu vergewissern, in welcher Zeichencodierung das Stylesheet codiert ist. Das BOM ist unsichtbar.

Lesen Sie mehr über das BOM.

Using HTTP

Der Server kann im Content-Type-Feld des HTTP-Headers bereits eine Angabe zur Zeichencodierung mitsenden, wenn Ihr Browser ein Stylesheet lädt. Diese Zeile in der HTTP-Antwort würde bspw. angeben, dass die Datei in UTF-8 codiert ist:

Content-Type: text/css; charset=utf-8

Voreinstellungen für den gesamten Server oder spezifische Einstelleungen können dazu führen, dass der Server ein Stylesheet mit Zeichen­codierungs­angabe ausliefert, Sie aber keine möchten. Oder der Server liefert es ohne solche Angabe aus, Sie möchten aber eine. Sie können das Verhalten für den gesamten Server oder für eine einzelne Datei oder eine begrenzte Anzahl von Dateien ändern, indem Sie die Servereinstellungen ändern (global bzw. lokal) oder mit Scriptsprachen wie PHP.

Im Konfliktfall überschreibt die Angabe im HTTP-Header immer die Angabe im Dokument, außer in den Browsern, in denen das BOM Vorrang vor HTTP hat.

Wir empfehlen allerdings, dass wenn Sie eine HTTP-Angabe zur Einstellung der Zeichencodierung verwenden müssen, zusätzlich auch eine @charset-Angabe ins Stylesheet einfügen. Dadurch wird sichergestellt, dass die Zeichencodierung immer noch bekannt ist, wenn das Stylesheet lokal verwendet oder verschoben wird, z.B. zum Testen oder Bearbeiten.

Weitere Informationen

Die meisten werden die Informationen in diesem Abschnitt nicht benötigen. Sie sind der Vollständigkeit halber hier erwähnt.

Andere Zeichencodierungen als UTF-8

Dieser Abschnitt ist nur von Bedeutung, wenn Sie Ihr Stylesheet nicht UTF-8-codiert speichern können.

Bis vor Kurzem war das IANA-Register das Nachschlagewerk für Bezeichner von Zeichencodierungen. Das IANA-Register enthält oft mehrere Bezeichner für dieselbe Codierung. In diesen Fällen sollten Sie den als „preferred“ (bevorzugt) gekennzeichnete Bezeichner verwenden.

Die neue Spezifikation Encoding enthält eine Liste, die gegen aktuelle Browser­implementierungen getestet wurde. Sie finden Sie in der Tabelle im Abschnitt Encodings. Am besten verwenden Sie die Bezeichner in der linken Spalte dieser Tabelle.

Beachten Sie: Wenn ein Bezeichner in einer dieser Quellen vorkommt, bedeutet das nicht automatisch, dass es gut wäre, diese Codierung zu verwenden. Einige der Codierungen sind problematisch. Wenn Sie wirklich nicht UTF-8 verwenden können, beachten Sie die Ratschläge im Artikel Eine Zeichencodierung wählen und anwenden.