レガシーブラウザを切り捨てる CSS ハック

• 2007年8月31日
• 23:48

CSS レイアウトには、各ブラウザでの検証が不可欠ですが、一体どれくらい古いブラウザまで対応すべきなのかが一番の問題かと思います。

レガシーブラウザは多くのバグを残したままの状態で開発が終了しているので、全てのブラウザに CSS を対応させるのはコーディングの複雑化やその労力を考えても『正直、無理！』です。また、対応を試みたとしても検証できる環境が少ないので、中途半端にレイアウトが崩れるなどネットショップでは特に致命的な不具合を発生させる可能性が高くなります。

レイアウトが崩れるくらいなら、レガシーブラウザに限り CSS を読み込ませず、HTML をそのまま表示させる方法がよっぽどスマートだと思うワケです。

当アクセスログで調べたところ、第4〜5世代のレガシーブラウザ（Win IE4.x・Win IE5.x・Mac IE5.2）はどれも1%前後の使用率になっているので、そろそろ切り捨てる勇気も必要かと考えています。（正直、Win IE5.5 対応は迷いました。）

そこで、レガシーブラウザに限り CSS の読み込みを回避するハックです。オススメはこの9番目、@import "style.css"/**/; のみ。こんな簡単なハックでレイアウト崩れを回避できるなんてスバラシイ。ちなみに、Win IE5.5 を含める場合は8番目の @import/**/"style.css"; です。

次に、ブラウザでは最大シェアであるが故に極めて評判が悪い IE6 のバグへの対応です。レガシーブラウザにカテゴライズしたいくらいの完成度が低いブラウザですが、シェアを考えると対応は必須です。

IE6 対応ではアンダースコア（_）ハックやスター（* html）ハックが知られていますが、開発元のマイクロソフトが公式に回避法を示しているので、素直に従うのも悪くないと思います。つまりは IE は条件つきコメントで CSS を指定することで、IE のバージョン毎に CSS を読み込ませることができる・・・と云うことです。

IE6 にのみ CSS を読み込ませるなら CSS ファイルへのリンクを <!--[if IE 6]>〜<![endif]--> で囲むだけです。使い方は最初に全てのモダンブラウザ向けの CSS を指定した後に IE6 専用の CSS を指定します。CSS は上から下に向かって解釈されるので、このページを IE6 で見ると、モダンブラウザ用の CSS で指定したそれぞれの値を IE6 専用の CSS で指定した値で上書きしてからレイアウトされます。

以上、たった2つのハックでコーディングはかなり簡素化されると思います。

• Web
• コメント [0]