人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

この記事は CSS Advent Calendar 2017 5日目の記事です。IE11/Edgeがメインの時代になったとはいえ、まだまだIEのみ表示がおかしいことがあります。そんなときに使えるCSSハックをまとめてみました。暇なときに少しずつ検証したので、以下で紹介するハックは動作確認済みです。

各バージョンごとのハック

IE8


@media \0screen {
  .selector {
    property: value;
  }
}

IE9


@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
  .selector {
    property: value;
  }
}

IE10


_:-ms-lang(x), .selector {
  property: value\9;
}

IE11


_:-ms-fullscreen, :root .selector {
  property: value;
}

Edge12


@supports (-ms-accelerator: true) and (not (color: unset)) {
  .selector {
    property: value;
  }
}

Edge13


@supports (-ms-accelerator: true) and (color: unset) {
  .selector {
    property: value;
  }
}

Edge14


@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) and (not (-webkit-text-stroke: initial)) {
  .selector {
    property: value;
  }
}

バージョンをまたぐハック

IE8〜11


@media screen\0 {
  .selector {
    property: value;
  }
}

IE9〜11


@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
  .selector {
    property: value;
  }
}

IE10〜11


_:-ms-input-placeholder, :root .selector {
  property: value;
}

Edge12〜13


@supports (-ms-accelerator: true) {
  .selector {
    property: value;
  }
}

Edge12〜14


@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
  .selector {
    property: value;
  }
}

IE10+（Edgeも全て含む）


_:-ms-lang(x), selector {
  property: value;
}

Edge12+（Edge全て）


@supports (-ms-ime-align: auto) {
  .selector {
    property: value;
  }
}

Edge13+


@supports (-ms-ime-align: auto) and (color: unset) {
  .selector {
    property: value;
  }
}

Edge14+


@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) {
  .selector {
    property: value;
  }
}

Edge15+


@supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial) {
  .selector {
    property: value;
  }
}

無いものは組み合わせて使う


/* IE10〜11 */
_:-ms-input-placeholder, :root .selector {
  property: value;
}
/* Edge12〜14 */
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
  .selector {
    property: value;
  }
}

例えば、IE10〜Edge14のにみ適用するハックはこのように2つ組み合わせれば実現できます。

間違って広まってしまったハック

この記事で非常に分かりやすく解説されていますが、以下のようなハックはもう使えません。


@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10,11 */
}

残念なことに、2017年の11月に書かれた記事でもこのハックを紹介しているものがあります。個人的にはこういった環境依存のハックを紹介する際は自分で検証してから記事にするのが当然だと思います。


_:-ms-input-placeholder, :root .selector {
  property: value;
}

なので、IE10〜11は上で紹介したこのハックを使用しましょう。

CSS本執筆しました！！！