Tuesday Tips

CSSInternet Explorer

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

_:-ms-fullscreen,
:root .ie11up {
    property: value;
}

IE 10

_:-ms-lang(x),
.ie10 {
    property: value\9;
}

IE 9

@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
    // IE9 CSS
    .ie9 {
        property: value;
    }
}

IE 8

@media \0screen {
    .ie8 {
        property: value;
    }
}

IE 7

* + html .ie7 {
    property: value;
}

IE 6

.ie6 {
    _property: value;
}

IE 6, 7, and 8

@media \0screen\, screen\9 {
    .ie678 {
        property: value;
    }
}

IE 8, 9, and 10

@media screen\0 {
    .ie8910 {
        property: value;
    }
}

IE 9 and 10

@media screen and (min-width: 0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ */
}

Microsoft Edge

@supports (-ms-ime-align: auto) {
    .selector {
        property: value;
    }
}

Listen to the episode!