モダンブラウザでCSSが効かない？

※この記事は11年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、最近やっと社会人としての自覚が芽生えてきたみやびです。

まぁいいやｗ

さて、今日も、少しでも迷えるWEBデザイナーを減らすべく、一言残しておこうと思う。

今日は、珍しくモダンブラウザ側の話である。
（モダンブラウザの対象としては、IE9、Google Chrome、Fire Fox、Safariとする）

ある案件のショップカートシステムを編集している時だった。
ローカルで先方に画面を見せるため、カートの管理画面から編集するCSSをそのままコピーペストしてCSSとして保存し、ブラウザチェックをしたところ、


・・・・・モダンブラウザでCSSがきかない。


これは私にとってはけっこう珍しい現象だったのだが、みなさんにとってはいかがだろうか。
たいていここで出てくるのは、IE6でCSSがきかない！だが、この時は違った。

原因として最初に思いたったのは、@charsetを設定していないことであった。
じつは、CSSにも文字コードの指定は大事で、できるなら、HTMLのコードに合わせるのがいいらしいが、別にHTMLのコードと一緒でなくても動く。
とかく、こいつがないと、CSS内の日本語が文字化けしてうまく動かなかったりする。
（だいたい、ショップカートの管理画面から操作するCSSになんか、@charsetなんてつけるわけもなく、これがひっかかっていた。）

ひとまず、CSSの先頭行に、
@charset "UTF-8";を記述した。
Fire Fox、Chrome、IE9OK、IE8もOK



・・・・今度はIEの7、6にきかない・・・。



ど、どどどうしろと？
charset、入れないとモダンブラウザだめ、いれなかったら、今度はIE6、7は大丈夫だがモダンブラウザはきかない・・・。
もう、お手上げである。スターハック使って、charsetを操作しようと思ったが、そんな珍技、できるわけもなく。
ちなみに、@charsetに別のコード、EUCやらShift-JISなりいれたが、いずれもダメ。
調べてみると、IE6は、UTF-8のCSSに対応していないとか・・・。
そんなこんなで、30分ほど、心で叫びながら方法を探していたら、ふと思い立った。

そうだ、文字自体のコードと、@charsetで指定した文字コードが違うからうまくいかないのでは・・・？
そう、根本的な問題だ。

さっそく、元のCSSに追加した分のCSSを、テキストエディタにコピペ、文字コードを指定して保存した。
（この時は、ショップカートシステムが、EUCを使っていたので、吐き出しているCSSもEUCだと見込んで、テキストエディタからの保存もEUCにした） そのテキストを開き直し、元のCSSにコピペ・・・・。

・・・・・CSSきいた！！
IE6と7もきいた！！

そう、そもそもなんのために文字コードを指定するのか。
そのファイル内の文字コードを統一するためである。
しかし、そのテキスト文字自体のコードが違えばそりゃバッティングする。
つまりは、今回は、よく見てなかったこっちが悪かったってこった（泣）

CSSきかない時は、この記事のことを試すと、解決すると思うよ。

うーん、気を付けよう・・・。