概要
CSS の @charset
at-規則 は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより先に一切文字を記述してはいけません。入れ子の文 でないとしても、条件付きグループ規則 では使えません。複数の @charset
at-規則が定義されると、最初のものだけが使われます。HTML 要素の style
属性や、HTML ページの文字セットが関係している <style>
要素の中では使えません。
この at-規則は、content
のような CSS プロパティで非 ASCII 文字を使う際に便利です。
スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を次の順序で試します(そして 1 つでも結果が得られると止めます):
Content-Type:
HTTP ヘッダーのcharset
属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値- ファイルの始めにある文字の Unicodeのバイト順 の値
- CSS の
@charset
at-規則 - 文書参照で定義されている文字エンコーディングを使用。
<link>
要素のcharset
属性です。この方式は HTML5 で廃止されており、使うべきではありません。 - 文書が UTF-8 だと仮定する
構文
@charset charset;
where :
- charset
- 使う文字エンコーディングを意味する
<string>
です。IANA-registry で定義されている、ウェブセーフな文字エンコーディングの名前でなければなりません。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、preferred とマークされているものだけが使われる必要があります。
例
@charset "UTF-8"; /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
@charset 'iso-8859-15'; /* スタイルシートのエンコーディングを Latin-9 (Western European languages, with euro sign)にします */
@charset "UTF-8"; /* 無効値です。at-規則より前に文字(空白)があります */
@charset UTF-8; /* 無効値です。' か " がなく、文字セットは CSS の <string>
ではありません */
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Level 2 (Revision 1) @charset の定義 |
勧告 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | 2.0 | 1.5 (1.8)[*] | 5.5 [**] | 9 | 4 |
機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | 2.1 | 1.0 (1.8) | 5.5 [**] | 10.0 | 4 |
[*] Firefox 1.0 は、文字エンコーディングが単一引用符や二重引用符の間に置かれていない無効な構文だけをサポートしました。
[**] IE 5.5 から IE 7 (を含む)では、IE も文字エンコーディングが単一引用符や二重引用符の間に置かれていない無効な構文をサポートしました。