93

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
  • 3
    Why do you want to do that?
    – user663031
    Aug 25, 2015 at 12:40
  • 2
    you almost certainly don't need to do that. Why are you trying to do it?
    – Patrick
    Aug 25, 2015 at 13:02
  • 38
    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, 2015 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. Aug 31, 2020 at 16:42

4 Answers 4

201

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

10
  • 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. Aug 26, 2015 at 16:53
  • 1
    Just tested it again and it definitely does work. Demo: jsfiddle.net/pd142446
    – KittMedia
    Oct 12, 2015 at 8:29
  • 8
    This hack no longer works, however this one does @supports (-ms-ime-align:auto) { .selector { property: value; } }
    – Roffers
    Aug 4, 2016 at 15:44
  • 1
    @KittMedia was removed in Edge 14 Oct 21, 2016 at 15:47
  • 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, 2021 at 10:36
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/

7
  • 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, 2019 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, 2019 at 13:11
  • 1
    @r3wt if one selector is invalid, the whole rule group gets ignored. Illustrated here css-tricks.com/…
    – CodeGust
    Apr 16, 2019 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, 2019 at 20:55
  • @AlexandrKazakov possibly, that's because the latest Edge is based on Chromium engine(?) which version have you got?
    – CodeGust
    Jun 14, 2019 at 21:18
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).

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.