CSSハックとサヨナラもしくはハイタッチ

それでは CSS ハックが IE の為に存在している。なんて考えている方におすすめの方法の紹介です。

その方法とは HTML の head 内に特殊なコメントタグ（条件付きコメント）を使用し、IE にのみスタイルを適用させる方法です。外部スタイルシートを読込ませることも可能ですし、JavaScript を特定のブラウザにのみ適用させたい場合にも使えます。

以下、それぞれの IE に適用する為のソースです。赤い部分が特殊なコメント部分ですので、その他の部分は適宜でどうぞ。

●すべてのIEに対して適用させる場合

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

●IE5.0 だけに適用させる場合

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

●IE5.5 だけに適用させる場合

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

●IE6 にだけ適用させる場合

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

●IE7 にだけ適用させる場合

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

それぞれの IE に適した CSS を用意し適用させればハックとサヨナラすることも可能ですし、管理も楽になるのではないでしょうか。

また、IE ハックだけを記述した CSS を用意し、すべてのIEに対して適用させる特殊なコメントでその CSS を適用させれば、ハックとハイタッチな関係も築けそうです。

見た目はすっかりおっさんになってしまった私ですが、気持ちはトム・ソーヤのままなので、ハックとはハイタッチな関係で行こうと思います。

●追記
もしも特定のバージョン以上の IE にだけ適用させたい場合は下のソースのように gte を追加します。

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

上のソースの場合、IE6 以上の IE にのみ適用させられます。つまり IE6 も含まれます。

また、特定のバージョンに満たない IE にだけ適用させたい場合は下のソースのように it を追加します。

<!--[if it IE 7]>
<link rel="stylesheet" type="text/css" href="ie-6.css" media="all" />
<![endif]-->

上のソースの場合、IE7 未満の IE にのみ適用させられます。つまり IE7 は含まれません。