【CSS】知っておいて損なし！IE・Edgeに対応したCSSハックについてまとめてみた（2019年版）

TOP > CSS > 【CSS】知っておいて損なし！IE・Edgeに対応したCSSハックについてまとめてみた（2019年版）

2019.07.05

CSS

　Microsoftが配布しているWebブラウザのIEとEdgeは、バージョンによってCSSハックの記述の仕方も異なってきます。

そこで今回は<div class=”test”>～</div>に対してcolor: #ff0000;を適用させるうえで、代表的なIE・Edgeのバージョンに対するそれぞれのCSSの記述方法をご紹介したいと思います！

IEのCSSハックの一覧

　以下のようにCSSを記述することで、IE8のみに適用させることができます！

@media \0screen {
	  .test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、IE9のみに適用させることができます！

@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、IE10のみに適用させることができます！

_:-ms-lang(x), .test {
	color: #ff0000\9;
}

　以下のようにCSSを記述することで、IE11のみに適用させることができます！

_:-ms-fullscreen, :root .test {
	color: #ff0000;
}

　以下のようにCSSを記述することで、IE8～11にまとめて適用させることができます！

@media screen\0 {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、IE9～11にまとめて適用させることができます！

@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、IE10～11にまとめて適用させることができます！

_:-ms-input-placeholder, :root .test {
	color: #ff0000;
}

　以下のようにCSSを記述することで、Edge12のみに適用させることができます！

@supports (-ms-accelerator: true) and (not (color: unset)) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、Edge13のみに適用させることができます！

@supports (-ms-accelerator: true) and (color: unset) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、Edge14のみに適用させることができます！

@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) and (not (-webkit-text-stroke: initial)) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、Edge12〜13にまとめて適用させることができます！

@supports (-ms-accelerator: true) {
	.test {
		color: #ff0000;
	}
}

　以下のようにCSSを記述することで、Edge12〜14にまとめて適用させることができます！

@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
	.test {
		color: #ff0000;
	}
}

　以上がIE・EdgeのCSSハックの記述方法でした！

今後、新しいブラウザのバージョンが出た際にはまたご紹介できたら…と思います！

TOP > CSS > 【CSS】知っておいて損なし！IE・Edgeに対応したCSSハックについてまとめてみた（2019年版）