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

you almost certainly don't need to do that. Why are you trying to do it? — Patrick, Aug 25 '15 at 13:02
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, Dec 29 '15 at 11:30
Note: The conditional comments used in the example only work for IE9 and below, so [if IE 11] will not actually work. — Sean McMillan, Aug 31 '20 at 16:42

score 200 · Accepted Answer · edited Apr 07 '20 at 22:44

200

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

edited Apr 07 '20 at 22:44

Jeff Clayton

7,053
1
31
36

answered Aug 25 '15 at 11:35

KittMedia

7,368
13
34
38

8

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. – Charles Morris - MSFT Aug 26 '15 at 16:53
1

Just tested it again and it definitely does work. Demo: http://jsfiddle.net/pd142446/ – KittMedia Oct 12 '15 at 08:29
@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. – Emil Borconi Mar 24 '16 at 10:42
8

This hack no longer works, however this one does @supports (-ms-ime-align:auto) { .selector { property: value; } } – Roffers Aug 04 '16 at 15:44
1

@KittMedia was removed in Edge 14 – LJ Wadowski Oct 21 '16 at 15:47
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 Apr 07 '20 at 23:01
Release history for those who want a clickable link: https://en.wikipedia.org/wiki/Microsoft_Edge – Jeff Clayton Apr 07 '20 at 23:01
@mitsu Which browser version did you test? – KittMedia Jun 24 '20 at 06:40
Version 88.0.705.81 is not working for me – Feb 27 '21 at 08:37
1

Of course not, since – as it’s written in the first line of my answer – it’s just for version 12–18. – KittMedia Feb 28 '21 at 10:36

score 21 · Answer 2 · edited Apr 07 '20 at 22:42

21

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

edited Apr 07 '20 at 22:42

Jeff Clayton

7,053
1
31
36

answered Aug 09 '17 at 11:10

CodeGust

831
3
15
36

1

@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. – CodeGust Apr 16 '19 at 12:11
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 – r3wt Apr 16 '19 at 13:11
1

@r3wt if one selector is invalid, the whole rule group gets ignored. Illustrated here https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/ – CodeGust Apr 16 '19 at 21:00
@r3wt thank you! :) you encouraged me to write the details that should have been the part of the answer initially – CodeGust Apr 19 '19 at 20:55
@AlexandrKazakov possibly, that's because the latest Edge is based on Chromium engine(?) which version have you got? – CodeGust Jun 14 '19 at 21:18
The new Chromium version is actually using the Chrome hacks instead, so this should show 12-18 instead now. – Jeff Clayton Apr 07 '20 at 22:41
It worked for me in original Edge browser, version 18. – Reporter Oct 13 '20 at 15:34

score 14 · Answer 3 · answered Dec 18 '18 at 21:43

14

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

answered Dec 18 '18 at 21:43

slava

791
1
11
26

score 4 · Answer 4 · answered Jan 05 '20 at 07:09

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

How to Identify Microsoft Edge browser via CSS?

4 Answers4

Linked

Related