墜落日記 - 2009年1月11日の墜落

結局嫌いな CSS ハックに逃げる

色々と試しているスタイルシートでの段組だが、IE 6.0 で同じ内容が二箇所にレンダリングされる不具合の回避方法が見付かった。
サイドバーに整形するブロックには float 指定しても、本文に関しては float 指定してはいけない、という物なのだが………

そうすると今度は W3C 標準に準拠した Firefox や Safari で正しく崩れる。

そう、正しく崩れるのである。
崩れるのが正しいのである。
というわけで、仕方ないので嫌いな CSS ハックを導入することにした。

割と有名な CSS ハックの１つだが、IE 6.0 が要素の直接の子要素のみを定義するセレクタである ">" セレクタに対応していないことを利用する。
例えば "DIV.container DIV.body" 指定のスタイルは class が container である DIV エレメントの内部に含まれる全ての class が body である DIV 要素に対応する。
これを "DIV.container > DIV.body" と指定すると、指定のスタイルは class が container である DIV エレメントの内部に含まれる直接の子要素である class が body である DIV 要素に対応する。

この子供セレクタ ">" には W3C 標準に正しく対応しているユーザエージェントは大概対応しているが、W3C 標準に真っ向から非対応の IE 6.0 では無視される。
しかも子供セレクタ ">" で指定したスタイル全体が無視されるという寸法だ。

だから、IE 6.0 では崩れてしまう正しい表現を IE 6.0 に認識させないために子供セレクタ ">" を利用する、という手段があるのである。

IE 6.0 みたいなレガシーブラウザに対応するためにワケ分からない CSS ハックを利用するというのは非常に馬鹿馬鹿しく腸煮えくり返る思いだが、一度世に放たれてしまった環境汚染物質はそうそう簡単に消え去ることはないのである。
現実問題として、拙作 Arcadian garden を見てくれている方々の IE 6.0 利用率は 2008 年 12 月集計で 27.2% と決して無視できる率ではない。

段組というレイアウト崩れするとわりと致命的な部分のスタイルだけに、今回は必要悪と言うことで涙を呑んだ。
（別の部分では差違を無視している部分もあったりする）
デザインバージョン 3.0 の基本ラインは取り敢えずコレで確定ということにしよう。

ちなみにその他のブラウザ利用率の集計だが。
IE 7.0 が 34.8% となっていて IE 6.0 と IE 7.0 の合計が 62% と依然高い割合を示している。
次いで高いのは Firefox 3 の 27.5%、これは微妙だが Sleipnir の 4.7% と続く。
Safari は 2% で、Google Chrome も 1.1% と依然低調。
Opera 9 の 0.4% という低調ぶりはもはや切なさすら感じるが、なにげに IE 8.0 が既に Opera 9 を抜いて 0.5% なのはどうしたものか(笑)
自己満足のためだけに運用している拙作 Arcadian garden の性質故かブラウザ利用率に世間一般との隔たりがあるようなのが面白い。

あ～、あと、いい加減に IE 5 シリーズはやめれ(爆)