IE 10から、条件付きコメントが廃止に(2)・IE 11の場合の対策



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

Internet Explorer 11のCSSハック

Internet Explorer(以下、IE)のバージョン10から、条件付きコメント(コンディショナルコメント)が廃止されてしまい、IE11も同様に条件付きコメントが使えません。

そして2016年1月12日から、Windows Server以外のOSでは、Vistaや最新の10を除いた7や8.1で、バージョン11が唯一サポートされるIEになりました(バージョン11がIEの最後のバージョンらしいですが)。
▶Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft


このように結構重要な立ち位置になったIE11ですが、他のモダンブラウザに比べて、改善したい独自の振る舞い(仕様?バグ? )を多く抱えています。しかも条件付きコメントが使えませんので、webでそれに代わるものを探したところ、CSSハックが使えそうなので試してみました。

[テスト]IE11でアクセスすると、ここの色が赤になります。


CSSソース

  .test h3  {
    font-size:18px;
    color:blue;
    text-align:center;
    }
  @media all and (-ms-high-contrast:none)  {
    *::-ms-backdrop, .test h3 { color: red } /* IE11 */
    }

Windows 10のEdgeとIE11でこのページにアクセスすると、[テスト]部分の違いがよく分かります。Edgeでは青色文字に、IE11では赤色文字になります。