how to detect IE and Edge browsers in CSS?

AlreadyLost picture AlreadyLost · Apr 20, 2017 · Viewed 41.9k times · Source

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

Answer

Claire picture Claire · Apr 20, 2017

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