@charset

概要

CSS の @charset at-規則 は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより先に一切文字を記述してはいけません。入れ子の文 でないとしても、条件付きグループ規則 では使えません。複数の @charset at-規則が定義されると、最初のものだけが使われます。HTML 要素の style 属性や、HTML ページの文字セットが関係している <style> 要素の中では使えません。

この at-規則は、content のような CSS プロパティで非 ASCII 文字を使う際に便利です。

スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を次の順序で試します（そして 1 つでも結果が得られると止めます）:

1. Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値
2. ファイルの始めにある文字の Unicodeのバイト順 の値
3. CSS の @charset at-規則
4. 文書参照で定義されている文字エンコーディングを使用。<link> 要素の charset 属性です。この方式は HTML5 で廃止されており、使うべきではありません。
5. 文書が UTF-8 だと仮定する

構文

@charset charset;

where :

charset

使う文字エンコーディングを意味する <string> です。IANA-registry で定義されている、ウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず1文字分の空白文字(U+0020)の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、preferred とマークされているものだけが使われる必要があります。

例

@charset "UTF-8";       /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
@charset 'iso-8859-15'; /* 無効値です。正しくない引用符が使用されています */
 @charset "UTF-8";      /* 無効値です。at-規則より前に文字（空白）があります */
@charset UTF-8;         /* 無効値です。' か " がなく、文字セットは CSS の <string> ではありません */

仕様

ブラウザ実装状況

[*] Firefox 1.0 は、文字エンコーディングが単一引用符や二重引用符の間に置かれていない無効な構文だけをサポートしました。
[**] IE 5.5 から IE 7 （を含む）では、IE も文字エンコーディングが単一引用符や二重引用符の間に置かれていない無効な構文をサポートしました。