条件付きコメントでIEのバージョンごとにCSSを変更する

条件付きコメントを使って、IEのバージョンごとにCSSを変更してみます。

対応ブラウザについて

条件付きコメントはIE5～IE9までサポートしていますが、IE10からは廃止されているため使用できません。
そのため、条件付きコメントにはIEかそうでないかを判別するものがありますが、IE10以上はIE以外に判別されるようになっているので注意が必要です。
　

IEのバージョン毎にCSSを読み込む

IE6～9までそれぞれに個別のCSSを読み込ませてみます。

head内

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

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

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

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

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie6" class="contents">IE6です</div>
<div id="ie7" class="contents">IE7です</div>
<div id="ie8" class="contents">IE8です</div>
<div id="ie9" class="contents">IE9です</div>

CSS

共通のCSSで.contentsを非表示にしておきます。

.contents {
	display: none;
}

ie6.css

#ie6 {
	display: block;
}

ie7.css

#ie7 {
	display: block;
}

ie8.css

#ie8 {
	display: block;
}

ie9.css

#ie9 {
	display: block;
}

IEのバージョン毎にCSSを読み込むデモページ
　

指定したバージョン未満でCSSを読み込む

head内

<!--[if lt IE 9]>
<link rel="stylesheet" href="./less_than_ie9.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="less_than_ie9" class="contents">IE9未満です</div>

less_than_ie9.css

#less_than_ie9 {
	display: block;
}

指定したバージョン未満でCSSを読み込むデモページ
　

指定したバージョン以下でCSSを読み込む

head内

<!--[if lte IE 9]>
<link rel="stylesheet" href="./ie9_below.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie9_below" class="contents">IE9以下です</div>

ie9_below.css

#ie9_below {
	display: block;
}

指定したバージョン以下でCSSを読み込むデモページ
　

指定したバージョンより大きいときにCSSを読み込む

head内

<!--[if gt IE 8]>
<link rel="stylesheet" href="./more_than_ie8.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="more_than_ie8" class="contents">IE9です</div>

more_than_ie8.css

#more_than_ie8 {
	display: block;
}

指定したバージョンより大きいときにCSSを読み込むデモページ
　

指定したバージョン以上でCSSを読み込む

head内

<!--[if gte IE 8]>
<link rel="stylesheet" href="./ie8_over.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie8_over" class="contents">IE8以上です</div>

ie8_over.css

#ie8_over {
	display: block;
}

指定したバージョン以上でCSSを読み込むデモページ
　

指定したバージョン以外でCSSを読み込む

head内

<!--[if !(IE 8)]>
<link rel="stylesheet" href="./not_ie8.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="not_ie8" class="contents">IE8以外です</div>

not_ie8.css

#not_ie8 {
	display: block;
}

指定したバージョン以外でCSSを読み込むデモページ
　

and指定

head内

<!--[if (gte IE 6) & (lte IE 8)]>
<link rel="stylesheet" href="./ie6-8.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie6-8" class="contents">IE6～8です</div>

ie6-8.css

#ie6-8 {
	display: block;
}

and指定のデモページ
　

or指定

head内

<!--[if (IE 7) | (IE 8)]>
<link rel="stylesheet" href="./ie7_or_ie8.css" />
<![endif]-->

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie7_or_ie8" class="contents">IE7,8です</div>

ie7_or_ie8.css

#ie7_or_ie8 {
	display: block;
}

or指定のデモページ
　

IEかIE以外かで読み込むCSSを変更する

条件付きコメントがIE10以上で対応していないので、正しくは「IE(IE9以下)」か「IE以外(+IE10以上)」で読み込むCSSが変更されます。

head内

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

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

HTML

<p>読み込まれるCSSによって以下の内容が切り替わります。</p>
<div id="ie9_below" class="contents">IE(IE9以下)です</div>
<div id="not_ie" class="contents">IE以外(+IE10以上)です</div>

ie9_below.css

#ie9_below {
	display: block;
}

not_ie.css

#not_ie {
	display: block;
}

IEかIE以外かで読み込むCSSを変更するデモページ
　

IE以外の指定は少し書き方が変わっているので注意が必要です。

<!--[if !IE]><!-->
～処理内容～
<!--<![endif]-->

　

【参考サイト】

• 条件付きコメント – Wikipedia
• バージョン ベクタ
• 【HTML】条件付きコメントでIEとそれ以外のブラウザでの処理を分岐する方法 ｜ KLUTCHE