web-dev-qa-db-ja.com

@charset "UTF-8"を指定する理由。あなたのCSSファイルに？

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

@charset "UTF-8";

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

また、このメタタグを "head"要素に含めると、CSSファイル内にメタタグを含める必要がなくなりますか？

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

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

メタタグで使用するのは問題ありませんが、そのメタタグを含むページにのみ使用してください。

CSS 2の w3c spec で、CSSファイルの文字セット解決の規則について読んでください。

119
Oded

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

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

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

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

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

スタイルシートの文字セットを決定するための正しいルールは優先度順です：

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

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

推奨読書

145
fuxia

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

2
tony

Cssファイルに<meta>タグを挿入している場合、何か間違ったことをしていることになります。 <meta>タグはhtmlファイルに属し、htmlがどのようにエンコードされるかをブラウザに伝えます。CSSについては何も言いません。これは別のファイルです。 htmlとcssで完全に異なるエンコーディングを使用することも考えられますが、これが良い考えだとは思いません。

2
WJS