IE 10から、条件付きコメントが廃止になってしまったので、その対策
Internet Explorer 10から、条件付きコメントが廃止になってしまいました。
Internet Explorer(以下、IE)のバージョン10から、標準モードと Quirks モードで、条件付きコメントが廃止されてしまいました。当然バージョン11でも同様に非サポートです。
IEは、ブラウザのシェアがほぼ独占状態だったバージョン6の頃、新旧のwebページの一貫した外見を確保できるようにするため互換モードを導入したことが、IE8の「ドキュメント互換性の定義」解説ページに書かれています。
▶マイクロソフト・[ドキュメント互換性の定義]同じく、そのページには「Internet Explorer 8 では、以前のバージョンよりも厳密に業界標準をサポートしています。 そのため、旧バージョンのブラウザー向けに設計されたサイトが、希望どおりに表示されない可能性があります。 この問題を解決するために、Internet Explorer 8 では、ドキュメント互換性という概念を導入し、サイトの設計でサポートされる Internet Explorer のバージョンを指定できるようにしています」とも書かれています。
『Internet Explorer 8 では、以前のバージョンよりも厳密に業界標準をサポートしています』ということは、裏を返せば、IE 8以前の7や6は業界標準のサポートが厳密でなかったことが伺われます。
それはともかく、バージョンが上がる度に互換モードやドキュメント互換性モードなどが次々に追加されていき、各バージョン毎に振る舞いの違う数多くのモードを把握するには解説書が必要なくらいになってしまいました。しかし、他のモダンブラウザが台頭してきて、自分を含め、web制作者はIEのみにかまっていられなくなり、条件付きコメントを多用することで、IEに対応するようになります。
そんなところで、条件付きコメントの廃止というのは、ちょっと辛いものがあります。IEを使うユーザーが減ったとはいえ、それなりのシェアがあり、かつ、他のモダンブラウザと違う特有の振る舞いが依然として残っていそうなので、IEの制御を避けてwebデザインは成立しません。
そこで、条件付きコメントを無理矢理にでも適用させる方法を模索してみました。
Emulate IE 9 互換モードを利用して、IE 10に条件付きコメントを無理矢理適用
条件付きコメントは非サポートですが、Emulate IE 9モード(IE 10を、前のバージョンのIE 9として動作させるもの)を利用することで、条件付きコメントを適用させることができます。本来のIE 10 標準モードの振る舞いに対応してはいないものの、IE10でどうしてもうまくデザインが収まらない場合の急場しのぎには使えます。
使い方
htmlのhead部分のmetaタグで、
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
と入れておき、条件付きコメントを使用します。IE 9として動作するので、条件付きコメントが反映されます。
下のサンプル(リンク先のページ)は、IE 10または、IE 11でご覧ください。
- サンプルページ1:
条件付きコメントが、IE 10、IE 11 では非サポートのページです。上のmetaタグ無し。IE 10、IE 11では次のように記載した条件付きコメント(ブラウザがIEの場合(IE 9まで)、クラスpart2を文字サイズを大きく、背景をピンクに)が無視され、上下の段落が同じに見えます。IE 9以前では、条件付きコメントの内容が反映されます。<!--[if IE]> <style> .part2 { font-size: 18px; background:pink;} </style> <![endif]-->
- サンプルページ2:
条件付きコメントが、IE 10、IE 11 でもサポートされるページです。ページ内容は、サンプルページ1と同じものですが、headタグ内に前出のcontent="IE=EmulateIE9"の指定
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
を追加しています。