CSS `@charset` アットルール

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

@charset CSS ルールは、スタイルシートで使う文字エンコーディングを指定します。この構文は、 content のように、一部の CSS プロパティで ASCII 以外の文字を使う場合に便利です。@charset の最初の文字は @ 記号ですが、これはアットルールではありません。これは、スタイルシートの先頭にのみ置ける特定のバイトシーケンスです。Unicode バイトオーダーマーク以外の文字は、その前に置けません。また、引用符や空白の使い方など、通常の CSS 構文規則にも従いません。

@charset が文字セット宣言として認識されない場合は、通常の at-rule として解析されます。 CSS構文モジュールは、このフォールバック動作を非推奨とし、スタイルシートの文法チェック時に破棄される、認識されないレガシールールとして定義しています。

スタイルシートの文字エンコーディングを定義する方法はいくつかあるため、ブラウザーは以下の方法を、以下の順序で試し、いずれかの方法が見つかり次第処理を止めます。

ファイル先頭にある Unicode バイト順文字 (BOM) の値
Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから得られた値
@charset CSS 宣言
参照元のドキュメントで定義されている文字エンコーディング、つまり <link> 要素のcharset属性を使う。この方法は非推奨なので、使わないでください
文書が UTF-8 だと仮定する

構文

css

@charset "UTF-8";
@charset "iso-8859-15";

引数

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

形式文法

@charset ルールは構文ではなく、以下の形式の特定のバイトシーケンスによって解析されることに気をつけてください。

@charset "<charset>";

例

有効・無効な文字セットの宣言

css

@charset "UTF-8"; /* Unicode UTF-8 にスタイルシートのエンコードを設定 */

css

@charset 'iso-8859-15'; /* 無効です。正しくない引用符が使われています */
@charset  "UTF-8"; /* 無効です。空白の数が 2 以上になっています */
 @charset "UTF-8"; /* 無効です。アットルールより前に文字（空白）があります */
@charset UTF-8; /* 無効です。文字セットは CSS の <string> 型であり、二重引用符が必要です。 */