IE用CSSの指定方法

様々なハックを使えばIE5.0移行のブラウザなら同じように見せるのは比較的簡単なのですが、ハックのコードだらけのCSSファイルになってしまうこともしばしば。今後、古いブラウザのシェアは低くなっていくことを考えるとハックしていないクリーンなCSSファイルにしておきたいものです。そこでブラウザごとに異なるCSSファイルを指定するわけですが、従来のやり方だとJavaScriptを組み合わせたりしなくてはならず非常に面倒です。
以下のようにコメントを書き込んでおくと指定したIEバージョンのみがCSSを読み込んでくれるようになります。

すべてのIEに対して（IE5, IE5.5, IE6）

<!--[if IE]>

  <link rel="stylesheet" type="text/css" href="ie-all.css" />

<![endif]-->

IE5.0に対して

<!--[if IE 5.0]>

  <link rel="stylesheet" type="text/css" href="ie-50.css" />

<![endif]-->

IE5.5に対して

<!--[if IE 5.5]>

  <link rel="stylesheet" type="text/css" href="ie-55.css" />

<![endif]-->

IE6.0に対して

<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="ie.6.css" />

<![endif]-->

これらを書く順番も考慮しなければなりません。ページの下にあるほうが後に読み込まれるわけですから、まず最初にすべての標準ブラウザに対応したCSSを指定し、そのあと古いIEから順番に指定して行きます。

<!--[if IE5.0]>

  <link rel="stylesheet" type="text/css" href="ie-50.css" />

<![endif]-->

<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="ie-6.css" />

<![endif]-->

FirefoxだとUserAgentを変えたりしてIEに『見せかける』ことができますが、間違ってIE用のスタイルシートを読み込むことがないので安心して使えます。