外部ファイルの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を指定して目を瞑るか……
情報をお持ちの方、よろしければコメントをいただきたい。
