Microsoftが配布しているWebブラウザのIEとEdgeは、バージョンによってCSSハックの記述の仕方も異なってきます。
そこで今回は<div class=”test”>～</div>に対してcolor: #ff0000;を適用させるうえで、代表的なIE・Edgeのバージョンに対するそれぞれのCSSの記述方法をご紹介したいと思います！
IEのCSSハックの一覧
1つのバージョンに対するCSSの記述方法
IE8のみに適用させる
以下のようにCSSを記述することで、IE8のみに適用させることができます！
@media \0screen {
.test {
color: #ff0000;
}
}
IE9のみに適用させる
以下のようにCSSを記述することで、IE9のみに適用させることができます！
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
.test {
color: #ff0000;
}
}
IE10のみに適用させる
以下のようにCSSを記述することで、IE10のみに適用させることができます！
_:-ms-lang(x), .test {
color: #ff0000\9;
}
IE11のみに適用させる
以下のようにCSSを記述することで、IE11のみに適用させることができます！
_:-ms-fullscreen, :root .test {
color: #ff0000;
}
複数のバージョンに対するCSSの記述方法
IE8～11にまとめて適用させる
以下のようにCSSを記述することで、IE8～11にまとめて適用させることができます！
@media screen\0 {
.test {
color: #ff0000;
}
}
IE9～11にまとめて適用させる
以下のようにCSSを記述することで、IE9～11にまとめて適用させることができます！
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
.test {
color: #ff0000;
}
}
IE10～11にまとめて適用させる
以下のようにCSSを記述することで、IE10～11にまとめて適用させることができます！
_:-ms-input-placeholder, :root .test {
color: #ff0000;
}
EdgeのCSSハックの一覧
1つのバージョンに対するCSSの記述方法
Edge12のみに適用させる
以下のようにCSSを記述することで、Edge12のみに適用させることができます！
@supports (-ms-accelerator: true) and (not (color: unset)) {
.test {
color: #ff0000;
}
}
Edge13のみに適用させる
以下のようにCSSを記述することで、Edge13のみに適用させることができます！
@supports (-ms-accelerator: true) and (color: unset) {
.test {
color: #ff0000;
}
}
Edge14のみに適用させる
以下のようにCSSを記述することで、Edge14のみに適用させることができます！
@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) and (not (-webkit-text-stroke: initial)) {
.test {
color: #ff0000;
}
}
複数のバージョンに対するCSSの記述方法
Edge12〜13にまとめて適用させる
以下のようにCSSを記述することで、Edge12〜13にまとめて適用させることができます！
@supports (-ms-accelerator: true) {
.test {
color: #ff0000;
}
}
Edge12〜14にまとめて適用させる
以下のようにCSSを記述することで、Edge12〜14にまとめて適用させることができます！
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
.test {
color: #ff0000;
}
}
まとめ
以上がIE・EdgeのCSSハックの記述方法でした！
今後、新しいブラウザのバージョンが出た際にはまたご紹介できたら…と思います！
