神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【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ハックの一覧

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ハックの記述方法でした!

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

関連記事

スポンサーリンク
検 索