ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

コンディショナルコメントとその廃止について@HTML5 Boilerplate

Sponsored Links

HTML5 Boilerplate(のうちのInitializr)を使ってみて見つけた「コンディショナルコメント」。DOCTYPE宣言のすぐ後ろにあって、IEのバージョンをチェックして、それぞれに特定のclass名をhtml要素に付与してくれるらしい。

これによって特定のIEに対するCSSハック等を使う必要がなくなり、よりスマートに作業が行えると。

たとえばHTML5 Boilerplateのテンプレート「Classic H5BP」では以下のようなコンディショナルコメントが確認できる。

<!DOCTYPE html>
<!--[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]-->
    <head>

この記述だと、IE7未満(IE6以下)のブラウザによるアクセスではhtml要素に「no-js, lt-ie9, lt-ie8, lt-ie7」というclass名が、IE7では「no-js, lt-ie9, lt-ie8」というclass名が、IE8では「no-js lt-ie9」というclass名が、IE9以上では「no-js」というclass名が付与されることになるらしい。

これによって特定のバージョンのIEに対してはこれらのclass名を使っての対応が可能になると。

HTML5 BoilerplateはMedia QueriesによるRWD(レスポンシブWebデザイン)対応だったり、こういった部分だったりと色々知ることができて大変ありがたいです。

話もどって「コンディショナルコメント」ですが、ちょっと調べたらなんでもIE10からは廃止のようで。その理由はIE10の頃にはもう十分にWeb標準の規約に準拠してるだろうから、そんな特定のブラウザ(バージョン)として区別する必要はないでしょう?ってことらしい。なるほど、それがほんとならたしかに。ほんとなら。

IE10の最終リリースまで状況がどうかわるかはわからないが、現在の方向性としてIE10ではコンディショナルコメントは提供されないということを頭に入れておきたい。特にこれまでコンディショナルコメントに依存したコードを多く実装してきたサイトでは注意してほしい。

IE10からコンディショナルコメントを廃止