How to target only IE (any version) within a stylesheet?

Mikes Notes

I need to make Ajabbi backwards-compatible with any old versions of IE that are still in use.

An issue with older people who have kept the same computer for 20 years and impoverished countries relying on old gear.

Getting the Content Management System (CMS) to do this is a small issue. It's knowing what code to use. And here it is.

From StackOverflow some years ago.

Internet Explorer 9 and lower:

You could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to target specifically, like the one below, using an external stylesheet.

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

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11:

Create a media query using -ms-high-contrast, where you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

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

Can use the @supports rule Here is a link with all the info about this rule.

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

Inline rule IE8 detection I have 1 more option but only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

As you specified for an embedded stylesheet. I think you need to use media query and conditional comment for the below version.

No comments:

Post a Comment