How do I load CSS stylesheets only in IE

Preface: IE has always been a special browser, and we can use some methods to specify that style sheets are only loaded in IE.

IE9 and below: You can use conditional comment statements to load IE specific stylesheets. Use an external stylesheet, as shown below.

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

But if it is IE10 above, this method is not very applicable.

IE10 or IE11: Use media queries (-ms-high-contrast) to load the stylesheet. Because -ms-high-contrast is Microsoft specific (and only available in IE 10+), it can only be resolved in Internet Explorer 10 or later.

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

Microsoft Edge12: You can use the @SUPPORTS @SUPPORTS reference article

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

To summarize, if we want to load the stylesheet only for IE, we just need to set up the conditional comment and -ms-high-contrast media query.