Warum @charset "UTF-8" angeben? in Ihrer CSS-Datei?

173

Ich habe diese Anweisung als die allererste Zeile zahlreicher CSS-Dateien gesehen, die mir übergeben wurden:

@charset "UTF-8";

Was macht es und ist diese Regel notwendig?

Wenn ich dieses Meta-Tag in mein "head" -Element einbinde, muss es dann nicht mehr auch in meinen CSS-Dateien vorhanden sein?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
css character-encoding rsturim
quelle

Antworten:

123

Es weist den Browser an, die CSS-Datei als UTF-8 zu lesen. Dies ist praktisch, wenn Ihr CSS Unicode-Zeichen und nicht nur ASCII enthält.

Die Verwendung im Meta-Tag ist in Ordnung, jedoch nur für Seiten, die dieses Meta-Tag enthalten.

Weitere Informationen zu den Regeln für die Zeichensatzauflösung von CSS-Dateien finden Sie in der w3c-Spezifikation für CSS 2.

Oded
quelle
7
Es ist auch wichtig, wenn Sie diese Dateien von Nicht-UTF-8-Sites verknüpfen, z. B.: Eine japanische Website, die als UTF-16 codiert ist und versucht, CSS von einem CDN zu laden, erhält unlesbaren Inhalt, wenn die CSS-Datei dies nicht deklariert Codierung.
Paracetamol
147

Dies ist in Kontexten nützlich, in denen die Codierung nicht per HTTP-Header oder anderen Metadaten angegeben wird, z. B. im lokalen Dateisystem.

Stellen Sie sich das folgende Stylesheet vor:

[rel="external"]::after
{
    content: ' ↗';
}

Wenn ein Leser die Datei auf einer Festplatte speichert und Sie die @charsetRegel weglassen , lesen die meisten Browser sie in der Gebietsschema-Codierung des Betriebssystems, z. B. Windows-1252, und fügen statt eines Pfeils â † ein.

Leider können Sie sich nicht auf diesen Mechanismus verlassen, da die Unterstützung eher… selten ist. Und denken Sie daran, dass im Netz ein HTTP-Header immer die @charsetRegel überschreibt .

Die richtigen Regeln zum Bestimmen des Zeichensatzes eines Stylesheets sind in der Reihenfolge ihrer Priorität:

  1. HTTP-Zeichensatz-Header.
  2. Byte Order Mark.
  3. Die erste @charsetRegel.
  4. UTF-8.

Die letzte Regel ist die schwächste, es wird in einigen Browsern nicht.
Das charsetAttribut in <link rel='stylesheet' charset='utf-8'>ist in HTML 5 veraltet .
Achten Sie auf Konflikte zwischen den verschiedenen Erklärungen. Sie sind nicht einfach zu debuggen.

Literatur-Empfehlungen

Fuxia
quelle
Meinen Sie, dass CSS-Dateien mit content-type:text/css;charset=utf-8Header bereitgestellt werden müssen ?
Pacerier
1
@Pacerier Ja, wenn dies die Codierung der HTML-Datei ist (sollte es sein).
Fuxia
Ich meine, ist es nicht schon impliziert, dass der Zeichensatz der CSS-Datei ohne Zeichensatz genauso interpretiert werden sollte wie der der eingebetteten HTML-Datei?
Pacerier
1
@ Pacerier Ich habe festgestellt, dass dies nicht immer der Fall ist.
MatTheCat
3

Ein Grund, auf jeder Seite, die Text enthält, immer eine Zeichensatzspezifikation anzugeben, besteht darin, Sicherheitslücken in Bezug auf Cross-Site-Scripting zu vermeiden. In den meisten Fällen ist der UTF-8-Zeichensatz die beste Wahl für Text, einschließlich HTML-Seiten.

Tony
quelle
2

Wenn Sie ein <meta> -Tag in Ihre CSS-Dateien einfügen, machen Sie etwas falsch. Das <meta> -Tag gehört in Ihre HTML- Dateien und teilt dem Browser mit, wie das HTML codiert ist. Es sagt nichts über das CSS aus, bei dem es sich um eine separate Datei handelt. Es ist denkbar, dass Sie für HTML und CSS völlig unterschiedliche Codierungen haben, obwohl ich mir nicht vorstellen kann, dass dies eine gute Idee wäre.

WJS
quelle