@charset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
@charset
は CSS のアットルール で、スタイルシートで使う文字エンコーディングを定義します。このルールはスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。入れ子の文でないとしても、条件付きグループルールの中で使うことはできません。複数の @charset
アットルールが定義されると、最初のものだけが使われます。HTML 要素の style
属性や、HTML ページの文字セットが関係している <style>
要素の中では使えません。
@charset "utf-8";
このアットルールは、非 ASCII 文字を一部の CSS プロパティ、例えば content
などの中で使う際に有用です。
スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザーは次の手順を順番に試します (そして 1 つでも結果が得られると止めます)。
- ファイル先頭にある Unicode バイト順文字 (BOM) の値
Content-Type:
HTTP ヘッダーのcharset
属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから得られた値- CSS の
@charset
アットルール - 文書参照で定義されている文字エンコーディングを使用。
<link>
要素のcharset
属性です。この方式は HTML5 で廃止されており、使うべきではありません。 - 文書が UTF-8 だと仮定する
構文
@charset "UTF-8";
@charset "iso-8859-15";
ここで、
- charset
-
使う文字エンコーディングを意味する
<string>
です。IANA-registry で定義されているウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず 1 文字分の空白文字 (U+0020) の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、使用できるのは preferred とマークされているものだけです。
形式文法
例
有効・無効な文字セットの宣言
@charset "UTF-8"; /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
@charset 'iso-8859-15'; /* 無効です。正しくない引用符が使用されています */
@charset "UTF-8"; /* 無効です。アットルールより前に文字(空白)があります */
@charset UTF-8; /* 無効です。' か " がなく、文字セットは CSS の <string> ではありません */
仕様書
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |
ブラウザーの互換性
BCD tables only load in the browser