CSS の @charset
at-規則 は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。入れ子の文 でないとしても、条件付きグループ規則 では使えません。複数の @charset
at-規則が定義されると、最初のものだけが使われます。HTML 要素の style
属性や、HTML ページの文字セットが関係している <style>
要素の中では使えません。
@charset "utf-8";
この at-規則は、content
のような CSS プロパティで非 ASCII 文字を使う際に便利です。
スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を順番に試します (そして 1 つでも結果が得られると止めます):
- ファイル先頭にある Unicode byte-order 文字 (BOM) の値
Content-Type:
HTTP ヘッダーのcharset
属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値- CSS の
@charset
at-規則 - 文書参照で定義されている文字エンコーディングを使用。
<link>
要素のcharset
属性です。この方式は HTML5 で廃止されており、使うべきではありません。 - 文書が UTF-8 だと仮定する
構文
@charset "UTF-8"; @charset "iso-8859-15";
ここでは:
- charset
- 使う文字エンコーディングを意味する
<string>
です。IANA-registry で定義されているウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず 1 文字分の空白文字 (U+0020) の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、preferred とマークされているものだけが使われる必要があります。
正式な構文
@charset "<charset>";
例
@charset "UTF-8"; /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
@charset 'iso-8859-15'; /* 無効です。正しくない引用符が使用されています */
@charset "UTF-8"; /* 無効です。at-規則より前に文字(空白)があります */
@charset UTF-8; /* 無効です。' か " がなく、文字セットは CSS の <string> ではありません */
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Level 2 (Revision 1) @charset の定義 |
勧告 | Initial definition |
ブラウザーの実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.