Tuesday Tips | Target Specific Internet Explorer Versions in CSS

Today is March 17, 2020, and for this Tuesday Tips episode we're covering Media Queries and Selectors to Write CSS for a Specific Version of Internet Explorer

Let's dive in!

----

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!

----

_:-ms-fullscreen,

:root .ie11up {

    property: value;

}

----

_:-ms-lang(x),

.ie10 {

    property: value\9;

}

----

@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {

    // IE9 CSS

    .ie9 {

        property: value;

    }

}

----

@media \0screen {

    .ie8 {

        property: value;

    }

}

----

* + html .ie7 {

    property: value;

}

----

.ie6 {

    _property: value;

}

----

@media \0screen\, screen\9 {

    .ie678 {

        property: value;

    }

}

----

@media screen\0 {

    .ie8910 {

        property: value;

    }

}

----

@media screen and (min-width: 0\0) {

    .ie910 {

        property: value\9;

    } /* backslash-9 removes ie11+ */

}

----

@supports (-ms-ime-align: auto) {

    .selector {

        property: value;

    }

}

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

--- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

Episode source