how to detect IE and Edge browsers in CSS?

Question

Is there an standard way to detect IE and Edge browsers in css? I saw responses for detecting in javascript file but I am looking for one in css

Solution 1

For IE 9 and lower, load a conditional stylesheet:

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

IE 10 and up doesn't support this, so you have to use media queries:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

For Edge 12-15:

@supports (-ms-accelerator:true) {
   /* Edge 12+ CSS */ 
}

EDIT

For Edge 16+

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
}

Solution 2

The accepted answer for Edge isn't working in Edge 16.

This alternative works:

@supports (-ms-ime-align:auto) {
    /* IE Edge 16+ CSS */ 
}

Via https://stackoverflow.com/a/32202953

(Adding new answer as I don't have comment privileges.)

Solution 3

Not sure about edge, but to target ie 10/11 you can use:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //styles
}

Solution 4

For supporting edge 12+ and 16+ as one liner

@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
     // your css here
}

Solution 5

All in one:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active),
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
    /* All CSS is here */
    .example {
        /* ... */
    }
}

View more solutions

Comments

[AlreadyLost]

Let's say I want to detect if it is IE or Edge then the backgournd shouldn't be fixed, what should I do?

[Claire]

You'd have to post your code and explain what you're trying to do.

[AlreadyLost]

disabling broken parallax for IE and Edge

[AlreadyLost]

thank you, Can I ask one more question? what is the difference between -ms-accelerator and -ms-ime-align:auto? I just saw someone mentioned that as well for Edge. Thank you

[Claire]

Both are simply CSS hacks. Basically you're checking to see if the browser supports a specific feature by "sniffing" for it. In this case, ms-accelerator is a hardware accelerator supported by edge, and ms-align-auto aligns the Input Method Editor. What they do is irrelevant to your situation. The point is that you can use them to sniff out browsers and apply conditional CSS. I digress though, this is likely temporary. As new browser versions and features are released, you will need to update these 'hacks'. Javascript feature detection is the best way forward. Google it.

[AlreadyLost]

Thanks Tom for your help

[Claire]

Thank you for this, I have added it to the accepted answer

[Blarzek]

For style class .example, apply the desired style in Internet Explorer 10/11 and Edge 12+.