IEの各バージョンだけに対応させるCSSの条件指定[CSS]

CSSハックというものが世の中にありますが、これと同じ効果のあるCSSの指定方法を紹介します。

ネタ基

CSSハックというのは、以下のような記述をCSSに書きます。

IE6のみ対応のCSSハック

* html div {
	color: red;
}

上記のやり方は広く普及している書き方です。

これと同じ効果のある書き方ですが、プログラミングで条件分岐のif文がありますが、これをHTMLで書くことにより、IEの各バージョンだけに適応させることができます。

/* IEに対応させる記述 */
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

ロジックとして「もしIEなら以下のソースを適応」ということになります。

さらに、それぞれのバージョンのみに対応させるためには、以下のように記述します。

/* IE6のみ対応 */
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

/* gt(greater than) - IE6以上のバージョンに対応 */
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

/* gte(greater than equall) - IE7のみと7以上のバージョン */
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

/* lt(less than) - IE8未満のバージョン */
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

/* lte(greater than equall) - IE8のみとIE8未満のバージョン */
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->

/* !(Not) - IEのすべてのバージョンに対応させない */
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="ie-style-sheet.css" />
<![endif]-->