@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.

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

css
@charset "utf-8";

このアットルールは、非 ASCII 文字を一部の CSS プロパティ、例えば content などの中で使う際に有用です。

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

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

構文

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

ここで、

charset

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

形式文法

Error: could not find syntax for this item

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

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

仕様書

Specification
CSS Syntax Module Level 3
# at-ruledef-charset

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@charset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報