2008年9月 4日
Google ChromeがCSSを読み込まなかった件について
休みだったので、タイムリーにGoogle Chromeを触ってみました。自分のサイトを見たら、いきなりCSS読みこまないでレイアウト崩れ。ビビった。
コンソールのResourcesを眺めたら、CSSファイルは読みに行っているのだが、そこから@importしているファイルを読みにいってくれてなかった。
どこか記述がおかしいのかなぁとファイルを調整。コメントを全部消したらちゃんと表示された。
どうやら、@chasetの記述がある場合、それがファイルの1行目にないとそのCSS全体を解釈しないみたいだ。スペースや改行があっても、ダメ。もちろんコメントがあってもダメ。BOMはあっても大丈夫みたい。
つまり以下の書き方はNG。
/* comment */
@charset "utf-8";
...以下の書き方だとOK。
@charset "utf-8";
/* comment */
@import "hoge.css";
...コメントの後の@importはちゃんと読み込んでくれるようです。
てことで、@charsetが前！コメントが後！ 注意です。
ちなみに、私の日記のトップもChromeだと背景画像を完全には読み込まなかったりする。まだまだベータ版て感じですね。