How to detect IE and Edge browsers in CSS?

Question

Is there a standard way to detect IE and Edge browsers in css? I saw the answers to detect in the javascript file, but I am looking for it in css

Answer 1

For IE 9 and below, load the conditional stylesheet:

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

IE 10 and above does not support this, so you should 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 the edge 16+

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

Answer 2

The accepted answer for Edge does not work in Edge 16.

This alternative works:

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

Via fooobar.com/questions/166221 / ...

(Adding a new answer as I do not have privileges for comments.)

Answer 3

, , .. 10/11, :

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

Answer 4

12+ 16+

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