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

Possible duplicate of https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css — flamusdiu, Apr 20 '17 at 20:13

Claire · Accepted Answer · 2019-07-26T06:43:54.523

80

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

edited Jul 26 '19 at 06:43

answered Apr 20 '17 at 20:11

Claire

3,146
6
22
37

Let's say I want to detect if it is IE or Edge then the backgournd shouldn't be fixed, what should I do? – AlreadyLost Apr 20 '17 at 20:17
You'd have to post your code and explain what you're trying to do. – Claire Apr 20 '17 at 20:24
1

disabling broken parallax for IE and Edge – AlreadyLost Apr 20 '17 at 20:35
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 – AlreadyLost Apr 20 '17 at 20:47
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. – Claire Apr 20 '17 at 21:02
Thanks Tom for your help – AlreadyLost Apr 20 '17 at 21:19

score 11 · Answer 2 · answered Mar 15 '18 at 21:24

11

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

answered Mar 15 '18 at 21:24

Jarrod Drysdale

111
1
5

Thank you for this, I have added it to the accepted answer – Claire May 16 '18 at 23:10

score 9 · Answer 3 · edited Jun 24 '19 at 16:25

9

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
}

edited Jun 24 '19 at 16:25

Carl Edwards

13,826
11
57
119

answered Apr 20 '17 at 20:17

JusMalcolm

1,431
12
10

score 5 · Answer 4 · answered Sep 15 '19 at 09:42

5

For supporting edge 12+ and 16+ as one liner

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

answered Sep 15 '19 at 09:42

MR_AMDEV

1,712
2
21
38

score 4 · Answer 5 · answered Jan 31 '20 at 10:24

4

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 {
        /* ... */
    }
}

answered Jan 31 '20 at 10:24

Blarzek

160
12

For style class `.example`, apply the desired style in Internet Explorer 10/11 and Edge 12+. – Blarzek Mar 25 '20 at 10:35

how to detect IE and Edge browsers in CSS?

5 Answers5

Linked