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本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs