How to Identify Microsoft Edge browser via CSS?

Question

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]-->

Solution 1

/* 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

Solution 2

/* 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/

Solution 3

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).

Solution 4

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);
         }
}

View more solutions

Comments

[Charles Morris - MSFT]

Microsoft is moving to remove as many -ms prefixed properties as possible in MS Edge to be interoperable with other browsers. As such, this is far from guaranteed to work in the future. As mentioned in other answers, feature detection is much more preferable.

[KittMedia]

Just tested it again and it definitely does work. Demo: jsfiddle.net/pd142446

[Emil Borconi]

@CharlesMorris-MSFT I do agree with you, but there are cases when we just need to do that. For example, pointer-events: none; works fine on IE 11 and all other browser, but stops working on Edge. I hope by the time they eliminate the -ms prefix they will also fix the problems which forced us to use different CSS in the first place. In this cases feature detection won't really help, because all the features are there, yet Edge have broken some things wich IE 11 finally fixed. KittMedia nice answer, thanks.

[Roffers]

This hack no longer works, however this one does @supports (-ms-ime-align:auto) { .selector { property: value; } }

[LJ Wadowski]

@KittMedia was removed in Edge 14

[CodeGust]

@r3wt _:-ms-lang(x), _:-webkit-full-screen, - only MS Edge "understands" that rule, other browsers ignor it. The rule is followed by a class or id name of an html element and so is applied to it. In other words, if a css code needs to be applied to an html element in Edge browser only, put down that special rule right before the class/id of your element.

[r3wt]

so the browser won't just ignore those and target the selector, since they are all seperated by a comma? typically the , seperates selectors in css. that's why this is confusing. i still don't understand why other browsers would ignore this and only ms-edge would apply the css to the selector after the comma

[CodeGust]

@r3wt if one selector is invalid, the whole rule group gets ignored. Illustrated here css-tricks.com/…

[CodeGust]

@r3wt thank you! :) you encouraged me to write the details that should have been the part of the answer initially

[CodeGust]

@AlexandrKazakov possibly, that's because the latest Edge is based on Chromium engine(?) which version have you got?

[Jeff Clayton]

The new Chromium version is actually using the Chrome hacks instead, so this should show 12-18 instead now.

[Jeff Clayton]

It still works in the latest release version 18.18363 (release 44.18362) just tested on Browserstack -- It may or may not work in the preview version 18.19041 (44.19041) but that is not live yet as of April 2020.

[Jeff Clayton]

Release history for those who want a clickable link: en.wikipedia.org/wiki/Microsoft_Edge

[KittMedia]

@mitsu Which browser version did you test?

[Reporter]

It worked for me in original Edge browser, version 18.

[techie18]

Version 88.0.705.81 is not working for me

[KittMedia]

Of course not, since – as it’s written in the first line of my answer – it’s just for version 12–18.