レガシーブラウザを切り捨てる CSS ハック
- 2008年3月14日
- 00:58
CSS レイアウトには、各ブラウザでの検証が不可欠ですが、一体どれくらい古いブラウザまで対応すべきなのかが一番の悩みの種かと思います。
レガシーブラウザは多くのバグを残したままの状態で開発が終了しているので、全てのブラウザに CSS を対応させるのはコーディングの複雑化やその労力を考えても『絶対に無駄ッ！』です。また、対応を試みたとしても検証できる環境が少ないので、中途半端にレイアウトが崩れるなど、特にネットショップでは致命的な不具合を発生させる可能性が高くなります。
レイアウトが崩れて表示されるくらいなら、レガシーブラウザに限り CSS を読み込ませず、XHTML をそのまま表示させる方法がよっぽどスマートだと思うワケです。当然ながら、XHTML は CSS が読み込まれない場合のブラウジングを予め想定してキッチリ記述する必要はありますが・・・例えば、メニューやコンテンツの区切りには <hr /> を入れるなど。
（追記）
当アクセスログで調べたところ、第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つのハックでコーディングはかなり簡素化されると思います。
・・・と云うワケで、みんなでレガシーブラウザを切り捨てようッ！
尚、このエントリは他ブログから編集して再ポストしたモノです。
