ブラウザをたくさん入れてみた

ブログのCSSをいじると、どのブラウザでもそれなりに破綻なく見れるかどうか表示確認しないといけない。昔、Movable Typeでブログをやっていたときは、

で表示確認していたのだが、その当時（7年ぐらい前）とはすっかりブラウザの世界も変わってしまってIEのシェアも60%台に減ってしまった。昔はIE6だけで90%以上あったのにね。
IE6はCSSへの対応にバグがあるのでシェアが減ってくれて嬉しいのだが、まだそれでもうちへのアクセスの10%以上はIE6なので、表示がまともかどうか確認しないといけない。当然IE7でも確認がいる。

このブログへのブラウザ別アクセス比率

ブラウザ	シェア
Internet Explorer 8	43.07%
Mozilla Firefox	17.52%
Internet Explorer 7	15.33%
Internet Explorer 6	10.48%
Safari	4.58%
Google Chrome	4.51%
Opera	2.90%

幸いにしてマイクロソフトからIE6,7,8の全部で表示確認ができるソフトがでているので、それを導入しようと思ったら、まずIE8のインストールが必要だったのでIE8を入れてみた。ついでにGoogle ChromeやSafari、Operaも。これで以下のブラウザで表示確認できるようになった。

「Microsoft Expression Web SuperPreview for Windows Internet Explorer」は、IE6/7/8でのWebサイトにおける見栄えの違いを比較・検証できるマイクロソフト製ソフト。

Google ChromeとSafariで表示不具合

さっそく自分のブログを表示させてみたら、Google ChromeとSafariで表示が変だ。body要素へのスタイルシートが効いてねえ。調べてみたら原因がわかった。

HTTPヘッダーでスタイルシート用の文字セットを指定する代わりに、CSS スタイルシートの完全な先頭（スペースや改行を含むいかなる文字も手前に存在しない位置）に次のように宣言を追加することをおすすめします。

Google ChromeとSafariなどのWebkit系ブラウザでは、CSSの完全な先頭に「@charset」指定を置かないといけない。そうしないとスタイルシートの最初の指定が無視される。私の場合body要素への指定が無視されていた。

しかし、はてなダイアリーでは追加のスタイルシートの先頭に「@charset "euc-jp";」と記載しても無駄なようだ。あいかわらずbody要素への指定が無視される。というわけで逆に「@charset "euc-jp";」を削ってやったｗこれで大丈夫。

はてなダイアリーはCSSがグチャグチャになってるからしょうがない。ひとつにまとめられないし。

いっこうに終わらぬCSS編集

しかしそれにしてもブログのCSS編集が終わらない。終着点が見えない。5合目ぐらいには来たと思うが、まだまだ先は長そうだ。もしかしたらサグラダ・ファミリアのように永久に完成しないかもしれない。なぜならブラウザの方がどんどん進化していっているので、CSS3に対応させようと思うと、修正点がどんどん増えていくからだ。

まあ大きな骨格はできあがったので、あとの細かい修正は気長にコツコツと手直ししていけばいいか。たぶん今年中には完成しないな('A`)