CODEWITHSUNDEEP
cssinternet-explorerbrowsermicrosoft-edge
AlreadyLost
AlreadyLost

Reputation: 827

how to detect IE and Edge browsers in CSS?

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

Upvotes: 36

Views: 48255

Answers (5)

Blarzek
Blarzek

Reputation: 157

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

Upvotes: 4

MR_AMDEV
MR_AMDEV

Reputation: 1942

For supporting edge 12+ and 16+ as one liner

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

Upvotes: 5

Claire
Claire

Reputation: 3184

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

Upvotes: 80

JusMalcolm
JusMalcolm

Reputation: 1431

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
}

Upvotes: 9

StudioFellow
StudioFellow

Reputation: 111

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

Upvotes: 11

Related Questions