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

@charset

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

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

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

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

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

@charset CSS 宣言

参照元のドキュメントで定義されている文字エンコーディング、つまり <link> 要素のcharset属性を使う。この方法は非推奨なので、使わないでください

文書が 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" パターンです。

プレビュー全画面表示

日本語テキスト表示

CSS の 日本語テキスト表示 パターンです。

プレビュー全画面表示

特殊文字の表示

CSS の 特殊文字の表示 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク