@charset“ UTF-8”を指定する理由; あなたのCSSファイルで？

私はこの指示を、私に引き渡された多数のCSSファイルの最初の行として見てきました。

@charset "UTF-8";

それは何をしますか、そしてこの規則は必要ですか？

また、このメタタグを「head」要素に含めた場合、CSSファイル内にも存在させる必要がなくなりますか？

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

ブラウザにcssファイルをUTF-8として読み取るように指示します。これは、CSSにASCIIだけでなくUnicode文字が含まれている場合に便利です。

メタタグでの使用は問題ありませんが、そのメタタグを含むページでのみ使用できます。

CSS 2のw3c仕様でCSSファイルの文字セット解決のルールについて読んでください。

これは、HTTPヘッダーやその他のメタデータ（ローカルファイルシステムなど）ごとにエンコードが通知されないコンテキストで役立ちます。

次のスタイルシートを想像してみてください：

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

リーダーがファイルをハードドライブに保存し、@charsetルールを省略した場合、ほとんどのブラウザーはWindows-1252などのOSのロケールエンコーディングでファイルを読み取り、矢印の代わりに↗を挿入します。

残念ながら、サポートはかなりまれなので、このメカニズムに依存することはできません。また、ネットではHTTPヘッダーが常に@charsetルールをオーバーライドすることを覚えておいてください。

スタイルシートの文字セットを決定するための正しいルールは、優先度の高い順になっています。

1. HTTP Charsetヘッダー。
2. バイトオーダーマーク。
3. 最初の@charsetルール。
4. UTF-8。

最後のルールは最も弱いものであり、一部のブラウザでは失敗します。
のcharset属性<link rel='stylesheet' charset='utf-8'>はHTML 5では廃止されました。
異なる宣言間の競合に注意してください。デバッグは簡単ではありません。

推奨読書

• Russ Rolfe：CSSでの文字エンコーディングの宣言
• IANA：文字セットの正式名 –他の名前は許可されていません。同じエンコーディングに複数の名前が登録されている場合は、優先名を使用し@charsetます。
• MDN： @charset。サポートテーブルがあります。私はこれを信用していません。:)
• CSS WGのテストケース。

テキストを含むすべてのページに常に文字セット仕様を含める理由の1つは、クロスサイトスクリプティングの脆弱性を回避することです。ほとんどの場合、UTF-8文字セットは、HTMLページを含むテキストに最適です。

cssファイルに<meta>タグを配置している場合は、何か問題があります。<meta>タグはhtmlファイルに属しており、htmlがどのようにエンコードされているかをブラウザに伝えます。CSSについては何も言っていません。これは別のファイルです。おそらく、htmlとcssのエンコーディングが完全に異なる可能性がありますが、これは良いアイデアだとは思えません。