HOME サイトマップ 営業日カレンダー お問い合わせ

IE 10から、条件付きコメントが廃止に


株式会社コニファ・ロゴ




IE 10から、条件付きコメントが廃止になってしまったので、その対策



株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

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"> 
    を追加しています。

ブラウザのバージョン確認用UA:




株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

copyright © 2019 Conifer,Inc. All rights reserved.