Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

@charset

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

css

@charset "utf-8";

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

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

ファイル先頭にある Unicode バイト順文字 (BOM) の値

Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから得られた値

CSS の @charset アットルール

文書参照で定義されている文字エンコーディングを使用。<link> 要素の charset 属性です。この方式は HTML5 で廃止されており、使うべきではありません。

文書が UTF-8 だと仮定する

アットルールエンコーディング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@charset
2
12
1.5
4
18
4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 1 は、文字エンコーディングが一重引用符または二重引用符で囲まれていない無効な構文をサポートしていました。

基本構文

CSS 
@charset "UTF-8";

body {
  font-family: sans-serif;
}

ライブデモ

@charset "UTF-8"

CSS @charset "UTF-8" demo.

プレビュー全画面表示

Japanesetextdisplay

CSS Japanesetextdisplay demo.

プレビュー全画面表示

specialcharacter. Display

CSS specialcharacter. Display demo.

プレビュー全画面表示

実務での使いどころ

  • 非UTF-8スタイルシートのエンコーディング宣言

    UTF-8以外のエンコーディングで保存されたCSSファイルが正しく解釈されるよう、文字セットを明示的に宣言できます。

注意点

  • @charset はファイルの最初のルールでなければなりません。BOM（バイト順マーク）やHTTPヘッダーのエンコーディング指定が優先される場合があります。

アクセシビリティ

  • 正しいエンコーディング宣言により、日本語などの多言語テキストが正しく表示され、すべてのユーザーがコンテンツを正しく読めるようになります。

参考リンク