👋

CSSの文頭のこれ「@charset “utf-8″;」について

2021/11/10に公開

どんな意味があるのか?

スタイルシートで使う文字エンコーディングを定義します🧐

結局これは必要なの?

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

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

使い方

@charset "utf-8";

参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/@charset

Discussion