CSS method to include IE6 hacks

Question

• CSS has @import, right?
• IE6 understands *html selector hack, right?

Is it possible to combine them like

//*html @import url(ie6hacks.css);

or, possibly,

//*html { @import url(ie6hacks.css); }

?

Good browsers must skip this, will it still work in IE6? How does it look as a solution? I can clearly see it looks ugly as normal CSS.

Answer 1

Unfortunately the *html hack cannot be used to import other stylesheets.

Here is an article explaining that hack and others that are useful for attacking IE-specific bugs.

Answer 2

Why bother with that wacky hack when you could use conditional comments to include just the CSS you need?

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

Some resources:

• http://www.quirksmode.org/css/condcom.html
• http://virtuelvis.com/archives/2004/02/css-ie-only

If you really must use @import, you can take advantage of the fact that IE doesn't follow specs for the @import rule. Normally it must be the very first think in a stylesheet or style tag, or it's completely ignored. However, IE6 (at least when I tested it) doesn't seem to care. Along those lines, you can do this:

<style type="text/css">
.NotARealClass { }

@import url("ie-style.css");
</style>

Note that I haven't tested this in anything besides FF3 (where it fails to load ie-style.css) and IE6 (where it loads it anyways). Your mileage may vary.

Answer 3

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.)