☰

CSS ファイルで @charset "UTF-8"; を指定するのはなぜですか? 質問する

tag-icon • tag-icon css character-encoding
CSS ファイルで @charset

私に渡された多数の CSS ファイルの最初の行に、この指示が書かれていました。

@charset "UTF-8";

それは何をするものですか、そしてこの at-rule は必要ですか?

また、このメタ タグを「head」要素に含めると、CSS ファイル内にもメタ タグを配置する必要がなくなりますか?

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

ベストアンサー1

これは、HTTP ヘッダーやその他のメタデータごとにエンコーディングが指定されていないコンテキスト (ローカル ファイル システムなど) で役立ちます。

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

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

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

残念ながら、このメカニズムはサポートがあまりないため、頼りにすることはできません。また、ネット上では HTTP ヘッダーが常にルールを上書きすることを覚えておいてください@charset。

正しいスタイルシートの文字セットを決定するルール優先順位は次のとおりです:

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

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

おすすめの読み物

おすすめ記事