Did you know that you can target specific versions of Internet Explorer right in your CSS stylesheet? There are several media queries and selectors that can combine to allow you to write CSS for a version of Internet Explorer. There are even queries that can select multiple versions in one fell swoop. This changes the game for how many designers and developers create their websites. Check out some examples below and view more at browserhacks.com!
IE 11 and above
css
_:-ms-fullscreen,
:root .ie11up {
property: value;
}
IE 10
css
_:-ms-lang(x),
.ie10 {
property: value\9;
}
IE 9
css
@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
// IE9 CSS
.ie9 {
property: value;
}
}
IE 8
css
@media \0screen {
.ie8 {
property: value;
}
}
IE 7
css
* + html .ie7 {
property: value;
}
IE 6
css
.ie6 {
_property: value;
}
IE 6, 7, and 8
css
@media \0screen\, screen\9 {
.ie678 {
property: value;
}
}
IE 8, 9, and 10
css
@media screen\0 {
.ie8910 {
property: value;
}
}
IE 9 and 10
css
@media screen and (min-width: 0\0) {
.ie910 {
property: value\9;
} /* backslash-9 removes ie11+ */
}
Microsoft Edge
css
@supports (-ms-ime-align: auto) {
.selector {
property: value;
}
}