IEのみに対応させるCSSの条件指定方法 -補足

前回(といっても結構前なのですが・・・)、「IEの各バージョンだけに対応させるCSSの条件指定[CSS]」を、書かせていただきましたが、どうやら好評のようでそれなりのブックマック数を獲得させていただきました。ありがとうございます。

そこで、今回は、それに対しての補足を付け加え、さらに見やすく書こうと思います。

すべてのバージョンのIEのみに定義

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

IEには対応させない

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

上記には、「!」がついています。これは、条件分岐の「Not」を意味しますので、IE以外を指します。

IE7のみに対応

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

IE6のみに対応

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

IE5.5のみに対応

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

IE5のみに対応

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

IE6以下のバージョンに対応

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

上記の「lt」はLess Thanを差しますので、IE7は含まないのでIE6以下になります。

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

上記の「lte」はLess Than Equalを意味し、IE6を含みますので、IE6以下になります。

IE7以下のバージョンに対応

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

IE8以下のバージョンに対応

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

IE6以上のバージョンに対応

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

上記のgtはGreater Thanを意味し、IE5.5を含まないので、IE6以上

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

上記のgtはGreater Than Equalを意味し、IE6を含みますのでIE6以上

IE7以上のバージョンに対応

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

IE8以上のバージョンに対応

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

参考

CSS-Tricks