IE11 のみ CSS を適用させる CSS ハック

CSS Grid を調整するため、IE11 のみ適用したい CSS があったのだが、IE11 は @supports がサポートされていないので、@media を用いた CSS ハックで対応することにした。

以下のように書けば、IE11 でのみ CSS を適用できる。

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

*::-ms-backdrop を除けば、IE10 以降で適用されるようになる。IE10 の対応とか考えてないので自分はコチラの書き方を選んだ。

@media all and (-ms-high-contrast: none) {
  .hoge {
    /* IE10 以降にのみ適用される */
  }
}

• 参考：IE11のみをCSSハックする方法
• 参考：IE11にのみ適用するスタイルシート - Qiita

  • 条件付きコメントはIE9までしか対応できない

…というところまで調べてから、-ms-high-contrast って何？と思って調べてみると、以下のような記事が…。

• 参考：-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org

どうも、「ハイコントラストモード」が ON だと IE でも適用されず、ON の場合も条件を満たすようにしてしまうと Edge でも適用されてしまうので、不完全な方法らしい。

この記事では「代わりにこうしろ」という情報がなかったのでもう少し調べてみると。

• 参考：css hacks for IE11 ( & Edge ) - Qiita
• 参考：css hacks 2018 ( IE11 / Edge / Chrome / Safari / Firefox ) - Qiita

コチラの文献によると、

_:-ms-lang(x)::-ms-backdrop, .selector {
  /* IE11 のみ適用される */
}

こんなハックがベストなのでは、とのこと。

_:-ms-lang(x)::-ms-backdrop, .selector、コレで行こう。