Combining Ie6 and Ie7 CSS Hacks in Same Stylesheet

CSS method to include IE6 hacks

Is it possible to combine them like

* html @import url(ie6hacks.css);

No. at-rules like @import are not selectors, so cannot be combined with other selectors.

There are ways to make at-rules work as hacks, for example this:

@import url(/* no! */iehacks.css);

will be loaded by IE6/7 but not the other browsers. However, I wouldn't recommend using it; this sort of thing can be really fragile. This particular example is also invalid CSS.

As Daniel says, if you want separate .css files for hacks, the best approach is a conditionally-included link tag. The beauty of “* html” is that you can put hack-rules in the same stylesheet, which is easier to manage if there are only a few of them; if you're having a separate style sheet anyway, it offers no advantage.

IMO “* html” for IE6 is the only hack it's still legitimate to use today. All the box model stuff is dead along with IE5 — assuming you're not using IE6 Quirks Mode, which you shouldn't — and the other browsers, even IE7, are generally too good to be able to attack with a simple hack; the few hacks that can target them are too complex/fragile/invalid to really use.

(And as the inventor of the Simplified Box Model Hack, I say a hearty good riddance to them.)

Ie css hack star

I would recommend splitting IE "hacks" into a separate stylesheet so than can be dropped in the future as support for those browsers is dropped.

With this approach, you can use conditional comments to add the appropriate stylesheet for the appropriate version on IE.

Here's a good post on conditional comments:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/

CSS compilers and converting IE hacks to conditional css

It's not really a compiler trick, but if you want to use conditional comments without having to compile separate per-browser stylesheets, you can simply use HTML conditional comments to inject a styling hook. For example:

    ...
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->

Now you can target rules you want to apply to IE<=6 and IE<=7 in the same stylesheet as the rest of the rules:

body.ie6 #thing { position: relative; }
body.ie7 #otherthing { z-index: 0; }

This is IMO marginally cleaner than the * html hack, which is the last acceptable CSS hack. (The “star hack” and “underscore hack” are invalid CSS: avoid.)

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html><html> <head>  <title>IE10/11 Media Query Test</title>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style>    @media all and (-ms-high-contrast:none)     {     .foo { color: green } /* IE10 */     *::-ms-backdrop, .foo { color: red } /* IE11 */     }  </style> </head> <body>  <div class="foo">Hi There!!!</div> </body></html>

Combining Ie6 and Ie7 CSS Hacks in Same Stylesheet

CSS method to include IE6 hacks

Ie css hack star

CSS compilers and converting IE hacks to conditional css

How to write a CSS hack for IE 11?

Related Topics

Leave a reply