Let's get started.
Blog
About
Contact
Target Microsoft Edge and IE with CSS

Target Microsoft Edge and IE with CSS

Loading Likes...
July 10, 2018

Let’s face it, for more than two decades, Internet Explorer has been the albatross of web browsing. Back in the day, it was pretty much all that was available to us. Now we have a number of different options which are all great. As of 2015, Microsoft scrapped IE and gave us a new browser called Edge, and though it’s better than IE, it still falls short in supporting some fairly common code.

That said, if you’re a developer, you’ll often be faced with the need to write “other” code for Edge and IE. Normally, you would do this with conditional comments such as:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->

But as of Internet Explorer 10, Microsoft has dropped support for conditional comments. Therefore, the next best way to target either of these browsers is with CSS. Below, you’ll find some simple code that’ll allow you to write CSS specifically for these browsers.

Microsoft Edge

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

Internet Explorer 10+

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .selector {
        property: value;
    }
}

If you’re trying to target Internet Explorer 9 and lower, you can simply use conditional comments.

As of the posting of this blog, these pieces of code have been tested and work great. Just keep in mind this code could become deprecated over time. If you’re looking for more browser targeting or want something pretty interesting to read, check out Browser Strangeness by Jeff Clayton.

Tags: , , , , , , ,

Leave a comment
More Posts