謎解きウェブ

なぜなにどうして。

Internet Explorerの条件分岐コメント

text:
Internet Explorer

IEには「条件分岐コメント(Conditional comments)」という（気持ち悪い）独自機能が実装されていて、これをつかうとIEのみに適用可能なHTMLの記述を簡単に行うことが出来ます。

しかしIEだけに適用させる場合ってどんな場合よ？と思うところですが、CSSコーディングを行う際にIEに別のCSSファイルを適用させたいときに使うのが一般的なよう。CSSハックの記述がどうにもこうにも増えすぎてしまって、こりゃ別ファイルに分けなければどうしようもない、というような場合ですね。

自分自身はと言うとプライベートでも仕事でも今までに利用した経験は無く、別ファイルに分けなければならないほど多量のハックを必要とすることがあるか？という疑問もありますが、知っておいて損はないということでメモ。

基本フォーマットについては、条件分岐コメントという名称どおり条件を含んだコメント形式になります。なにかしらプログラムを組むような人ならお馴染みのif文がHTML中で使えるとうイメージです。

条件に合致した場合にHTML部分を適用
<!--[if 条件]>HTML<![endif]-->
条件に合致しなかった場合にHTML部分を適用
<!--[if !条件]><![IGNORE[--><![IGNORE[]]>HTML<!--<![endif]-->

以下、条件部分のフォーマットについて、条件に合致した場合に特定のCSSファイルを適用させるという具体的な例をあげてまとめました。

IE

利用しているブラウザがIEだった場合、バージョンにかかわらずlayout_ie.cssを適用。

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

lt IE version

利用しているIEがバージョン6未満のとき、layout_ie5.cssを適用。

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

lte IE version

利用しているIEがバージョン5.5以下のとき、layout_ie5.cssを適用。

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

IE version

利用しているIEがバージョン7のとき、layout_ie7.cssを適用。

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

gte IE version

利用しているIEがバージョン6以上のとき、layout_ie.cssを適用。

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

gt IE version

利用しているIEがバージョン5.5より新しいとき、layout_ie.cssを適用。

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

バージョンナンバー version の表記について

バージョンナンバーは2桁で指定した方が無難のようです。表記を1桁にして例えば <!--[if IE 5]> ... <![endif]--> と記述した場合、IE 5のみに適用されるものと思ってしまいますが、この場合IE 5.5にも適用されてしまうらしい。

バージョンナンバーの様々な指定と実際の適用結果をまとめたページがありましたので、詳しくは以下をご覧頂いた方がいいでしょう。

条件付コメント(Conditional Comments)実験ページ
↑ Page Top