IE HTMLのIE分岐の条件付きコメント が効かなくなってた。

表題のとおりです。

画像をレスポンシブで100%表示するのにObject-fitが便利なのですが、IE11ではObject-fitがサポートされてないので、HTMLのIEを判別させる条件付きコメントを使ってIEの時だけ上書きするCSSを読み込ませようとしていました。

<!--[if IE]><link rel="stylesheet" href="./assets/css/ie.css"><![endif]-->

Windowsの実機で確認するとIE用のCSSが読み込まれる気配がなく、調べた所IE10から条件付きコメントの機能が廃止になってるようでした。(IE対応不要な案件ばかりしてたので知らなかった...

IE10でコンディショナルコメントが廃止される背景には、IE10が十分に標準規約に準拠しているため、もはや特定のバージョンのブラウザとして区別する必要がないといった理由がある。
出典: IE10からコンディショナルコメントを廃止 | マイナビニュース

「IE10が十分に標準規約に準拠しているため、もはや特定のバージョンのブラウザとして区別する必要がないといった理由がある。」( ತಎತ) ふ〜ん
嘘つけ!!!
つまり上記の<!--[if IE]> はIE9以下のみで有効になるようです。

IE用のCSSハック

条件付きコメントが効かなくなっているのでIE11に対応するには、懐かしのCSSハックを使う必要があるようです。
(条件分岐でIEだけ別のCSS読み込ませるほうが他ブラウザへの影響もなくて楽だったのですが...)

IE10用以降用 CSSハック

-ms-high-contrast:noneというメディアクエリを使うと、IE10以降のみに適応されるCSSが作成できるようです

@media all and (-ms-high-contrast:none) {
 /* IE10以降に適応されるCSS */
}

IE11用 CSSハック

IE11は上記のメディアクエリに加えて*::-ms-backdrop, をセレクターにつける事で、IE11のみにCSSを適応させることが出来るようです。

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .selector {
    /* IE11のみに適応されるCSS */
  }
}

@media all and (-ms-high-contrast:none) {} このメディアクエリを付けず、
*::-ms-backdrop, のみの場合は IE11 に加えて IE7 と IE5 にスタイルが当たるようです。
なので、IE7以前に対応しないのであれば、メディアクエリは不要で

*::-ms-backdrop, .selector {
  /* IE11に適応されるCSS */
}

とすれば良さそうです。

IE10もIE11もブラウザのバグが多すぎて別途対応しなければならなくなるのに、何故この条件付きコメントの機能を廃止したのか理解不能です...
つまりマイクロソフト的にももうIEの対応は辞めようよ。って事ですよね？
「IE対応はしてません」を積極的に使っていきましょう!!

おまけ: object-fit を擬似的にIEに対応させる方法

上記のCSSハックを使って次のようなIEに object-fit っぽい挙動を実装しました。

.coverImg
  position: relative
  img
    object-fit: cover
    position: static
    width: 100%
    height: 100%

@media all and (-ms-high-contrast:none) {
  /* for IE10, IE11 */
  .coverImg
    overflow: hidden
    img
      position: absolute
      top: 50%
      left: 50%
      width: 100%
      height: auto
      min-width: <image-width>px
      min-height: 100%
      transform: translateX(-50%) translateY(-50%);
}

@supports ( object-fit: cover ) {
  .coverImg
    img  
      min-width: auto
      min-height: auto
      transform: none
}