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

Mike's Notes

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

This is 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 minor issue. It's knowing what code to use. And here it is.

From StackOverflow some years ago.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

18/04/2025

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

By:
Stackoverflow: 09/02/2015

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