CSS @charset Eigenschaft

Die @charset-At-Regel deklariert die Zeichenkodierung, die in einem externen Stylesheet verwendet wird. Zeichenkodierungen ordnen die rohen Bytes einer Datei lesbaren Zeichen zu, daher muss der Browser wissen, welche Kodierung ein Stylesheet verwendet, bevor er Nicht-ASCII-Text korrekt interpretieren kann — Buchstaben mit Akzenten, Währungssymbole, Emoji oder Inhalte in content: "…"-Deklarationen.

Diese Seite erklärt, wann @charset tatsächlich gilt, die strengen Syntaxregeln, die leicht falsch umgesetzt werden können, wie der Browser entscheidet, welche Kodierung Vorrang hat, und welche typischen Fehler zu vermeiden sind.

Wann gilt @charset?

@charset ist ausschließlich für externe Stylesheets gedacht (eine separate .css-Datei, die mit <link> eingebunden oder mit @import importiert wird). Es wird ignoriert, wenn:

• Es innerhalb eines HTML-<style>-Blocks erscheint.
• Es innerhalb eines Inline-style-Attributs erscheint.
• Es nicht das allererste Element in der Datei ist.

In einem HTML-Dokument selbst wird die Kodierung mit dem <meta charset>-Tag festgelegt, nicht mit @charset.

In der Praxis wird @charset selten benötigt: Wenn das Stylesheet als UTF-8 gespeichert wird (die Standardkodierung fast jedes Editors und die empfohlene Kodierung für das Web), erkennt der Browser die Kodierung in der Regel korrekt. @charset ist vor allem bei älteren Stylesheets relevant, die in Nicht-UTF-8-Kodierungen gespeichert sind, oder als explizite Sicherheitsmaßnahme.

Syntax

@charset "encoding";

Die Regel nimmt einen einzelnen string entgegen, der eine Kodierung aus dem IANA-Register benennt, zum Beispiel "UTF-8" oder "iso-8859-15".

Die Syntax ist ungewöhnlich streng — @charset ist keine normale At-Regel und berücksichtigt nicht die übliche CSS-Flexibilität bezüglich Leerzeichen und Kommentare:

• Es muss das erste Byte des Stylesheets sein. Vor ihm dürfen keine Zeichen, Kommentare oder Leerzeichen stehen.
• Die Kodierung muss in doppelte Anführungszeichen eingeschlossen sein.
• Zwischen @charset und dem öffnenden Anführungszeichen muss genau ein Leerzeichen stehen.
• Die Zeile muss mit einem Semikolon enden.

@charset "UTF-8"; /* Set the stylesheet encoding to Unicode UTF-8 */

Gültige und ungültige Verwendung

Aufgrund der strengen Regeln oben entscheiden kleine Formatierungsunterschiede darüber, ob die Regel gilt oder ignoriert wird:

@charset "UTF-8";        /* Valid: standard form */
@charset "ISO-8859-15";  /* Valid: any registered encoding name */
 @charset "UTF-8";       /* Invalid: a space precedes the at-rule */
@charset 'UTF-8';        /* Invalid: single quotes are not allowed */
@charset  "UTF-8";       /* Invalid: more than one space after @charset */
@charset "UTF-8"         /* Invalid: missing the closing semicolon */
@charset UTF-8;          /* Invalid: the value must be quoted */

Wenn @charset ungültig ist oder ignoriert wird, wirft der Browser keinen Fehler — er greift einfach auf die nächste verfügbare Kodierungsquelle zurück.

Wie der Browser eine Kodierung auswählt

@charset ist nur eines von mehreren Signalen und hat eine festgelegte Priorität. Der Browser verwendet die erste gefundene Quelle in dieser Reihenfolge:

1. Eine Byte-Reihenfolge-Markierung (BOM) am Anfang der Datei.
2. Der charset-Parameter des HTTP-Content-Type-Antwort-Headers (z. B. text/css; charset=utf-8).
3. Die @charset-At-Regel.
4. Das charset-Attribut des <link>-Elements, das das Stylesheet geladen hat (veraltet).
5. Die Kodierung des verweisenden Dokuments.
6. Als Fallback UTF-8.

Da ein serverseitig gesendeter Content-Type-Header Vorrang vor @charset hat, kann ein falsch konfigurierter Server die deklarierte Kodierung überschreiben. Dies ist ein Grund dafür, dass das Festlegen der Kodierung auf HTTP-Ebene (oder die durchgängige Verwendung von UTF-8) der zuverlässigste Ansatz ist.

Werte

@charset akzeptiert einen einzelnen angeführten string, der die Zeichenkodierung benennt, zum Beispiel "UTF-8" oder "iso-8859-1". Es akzeptiert nicht die Schlüsselwörter initial oder inherit — diese gelten für CSS-Eigenschaften, und @charset ist eine At-Regel, keine Eigenschaft.

Verwandte At-Regeln

• @import — ein Stylesheet in ein anderes einbinden. Falls verwendet, müssen @import-Regeln direkt nach einem eventuellen @charset folgen.
• @media — Stile bedingt basierend auf Medieneigenschaften anwenden.
• @font-face — benutzerdefinierte Webschriften laden und benennen.

Übung