How to Identify Microsoft Edge browser via CSS?

94
votes

I'm developing web application and I need to identify Microsoft Edge's browser separately from others, to apply unique styling. Is there a way to identify Edge by using CSS? Just like,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
4
cssbrowsermicrosoft-edge
Why do you want to do that? - user663031
you almost certainly don't need to do that. Why are you trying to do it? - Patrick
This is most certainly something you might need. At the time of writing, Edge is still full of quircks that will severely mess up valid CSS which works in every other browser, including IE. - Lawyerson
Note: The conditional comments used in the example only work for IE9 and below, so [if IE 11] will not actually work. - Sean McMillan

4 Answers

200
votes

/* Microsoft Edge Browser 12-18 (All versions before Chromium) */

This one should work:

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

For more see: Browser Strangeness

21
votes
/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

That works great!

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

14
votes

More accurate for Edge (do not include latest IE 15) is:

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } works for all Edge versions (currently up to IE15).

4
votes
For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}