読者です 読者をやめる 読者になる 読者になる

はせる

は・せる、馳せる

CSSの「@charset」が時々悪さする件

 外部ファイルのCSSで先頭に「@charset」を指定した場合、先頭のスタイル設定やFirebugを使用出来なくなることがある件について。

@charset "utf-8";

 外部CSSファイルの先頭で指定する「@charset」。これに関連して2度ほど良くわからない現象が起きたので備忘録的にメモ。ちなみに環境はオフィスの開発環境でWindows7+Chrome、エディタはEclipse。

現象と解決策

 1度目は、先頭に指定されたスタイル設定が適用されない!と思って思考ループに陥った。
 2度目は別な日に、今度はChromeのFirebugが出てこない現象が起きた。Chromeのデベロッパーツールコンソールには下記のようなメッセージが出力されていた。

Uncaught TypeError: Cannot call method 'push' of undefined        firebug-lite.js:30905

 このメッセージでGoogle先生に訊いてみると「LocalStrageを削除すると直る」ということも書いてあったが、こちらの環境ではダメだった。
 結局、HEADのLINK要素とSCRIPT要素を1つずつ削除していって、「@charset」が記述されている外部CSSに行き当たった。

 どちらも「@charset」を削除したら問題は解決した。

検証

 気持ちが悪いので検証しようと思ってやったこと。

 他の外部CSSファイルにも@charsetが記述されていたためそのファイルの文字コードを確認してみると、@charsetはUTF-8だけど保存はShift_JISになっていた。EclipseのCSSエディタの設定で、デフォルトがShift_JISになっていた所為のようだ。ダメじゃん、コレじゃね?と思って保存し直して確認。...ダメ。@charsetだけ記述して読み込ませるとFirebugが出てきた。ん?スタイル設定を記述して読み込ませると、...ダメ。なにこれ?

 そもそも、@charsetを調べてみる。
 外部CSSファイルを読み込む際は、META要素のhttp-equiv="Content-Type"と同じ文字コードを使う。もし外部CSSファイルのみ別な文字コードを使う場合はcharsetを記述する必要があるようだ。LINK要素のcharset属性で代用可とのこと。ただしNetscape6では問題が起こる場合もある模様(外部CSSの文字コード指定 - lucky bag[2004-11-24])。

 んー、スッキリはしないものの、META要素ではしっかり指定してあるし、LINK要素にcharsetを指定して目を瞑るか……
 情報をお持ちの方、よろしければコメントをいただきたい。