IE の CSS を ハック してみる

有名なハックには２通り（もしくは両方）の理由があって有名・・・

1. １文字くらいで（古さゆえ？）簡単に書ける（後発のが複雑に見える）
2. 古くからあり浸透してる（新しいモノが出ても、遡って書き換えるのは面倒）

例えば、 「＊」を１文字、「＿」を１文字、先頭に追加するだけ・・・とか
でも、 このどちらのハックも、CSS的にはバリデーションに引っかかる（文法エラー）
しかし、３番目の選択肢もある。 （そもそもハックなのだから、推奨/非推奨ってこともない気もするが）
ここから挙げるハックは、CSSの文法エラーにはあたらない。 （バリデーションチェックを通るハズだと思われるモノ）
まずは、

既存のCSSをハック（外部ファイル書き換え）して

なんとかなってくれないかな？と、試してみるモノ

IE 6 と Mac IE 5

* html p {color: #9cf;}

（IE 6 と Mac IE 5）以外

html[xmlns] p {color: #9cf;}
しかし、 それでもどうにもならなくて、こりゃもう、

CSSファイルをブラウザ別に作って

振り分けるしかなさそう、、、だと試してみるモノ

IE 6,7 と Mac IE5

（title属性を2つ以上書くこと）

1. 固定スタイルシート：title属性を指定していないCSS
2. 優先スタイルシート：title属性が指定してあるCSS

最近のブラウザは、優先スタイルシートが2つ以上の場合は、先（上）のが有効になる。
でも、 IE 6,7 と Mac IE5では、最後のスタイルシートまで読む進む。

<link rel="stylesheet" href="style.css" media="all" type="text/css" /> <link rel="stylesheet" href="true.css" media="all" title="true" type="text/css" /> <link rel="stylesheet" href="IE.css" media="all" title="IE" type="text/css" />

IE 8以下（Mac IE 5 含む） + Opera（Win＆Mac）

<style type="text/css"> p {color: #9cf;} </style> <style type="text/css" title="true"> p {color: #9cf;} </style> <style type="text/css" title="IE"> p {color: #999;} </style>

IE 外部 CSS 振り分け

<!--[if IE ]> <link rel="stylesheet" type="text/css" href="IE.css" /> <![endif]-->

if文で指定している文字列「IE」の部分に、 IEのバージョン番号も書き加えることもできる。
IE 8以外
<!--[if !IE 8 ]>
IE 8～（IE 7よりも上）
<!--[if gt IE 7 ]>
IE 7～（以上、IE 7含む）
<!--[if gte IE 7 ]>
IE 5～ IE6（IE 6以下）
<!--[if lte IE 6 ]>
IE 5（IE 6未満）
<!--[if lt IE 6 ]>
といったことで、
ここでは、IE（自分に必要があったので）の例を挙げたけれど、 たぶん、 同じアプローチで探したとして、他のブラウザ用にも何かしら、 文法エラーにならない（≒安全）ハックは見つかるだろう。