条件付きコメント

以下のタグは、IE7未満のIEだけが非コメントとして解釈する。それ以外のブラウザはコメントとして解釈する。

条件付きコメント

<!--[if lt IE 7]>
<foo></foo>
<![endif]-->

上例の「IE7未満」という条件部分は他にも次のようなものがある。

条件の例

<!--[if lt IE 7]> IE7未満 <![endif]-->
<!--[if IE 7]> IE7 <![endif]-->
<!--[if IE 8]> IE8 <![endif]-->
<!--[if gt IE 8]> IE8 以上 <![endif]-->

使い道

これを利用した次のようなテクニックがある。

IEのバージョンごとに異なるクラスを与える

異なるクラス

<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

低いバージョンのIEに警告を出す

警告を出す

<!--[if lt IE 7]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

es5-shim.jsなどでES5対応させる

IE8以前ではECMAScript5の機能が実装されていない。そういう場合、その機能を提供するes5-shim.jsを読み込ませて対応する必要がある。

es5-shim.jsやjson3.jsをロード

<!--[if lt IE 9]>
  <script src="bower_components/es5-shim/es5-shim.js"></script>
  <script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->

以上

htmlの条件付きコメント

条件付きコメント

使い道