Corredor

ウェブ、プログラミングの勉強メモ。

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

CSSシークレット ―47のテクニックでCSSを自在に操る

CSSシークレット ―47のテクニックで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 以降にのみ適用される */
  }
}

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

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

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

コチラの文献によると、

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

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

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