5
  • 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.

Kara
  • 6,115
  • 16
  • 50
  • 57
temoto
  • 5,394
  • 3
  • 34
  • 50

3 Answers3

12

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:

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.

Dan Lew
  • 85,990
  • 32
  • 182
  • 176
  • I know that, thanks. Why? Because i thought it would be clever and nice to keep CSS hacks inside CSS. – temoto Mar 05 '09 at 16:14
  • This is the way to go if all your ie6-specific css is in a separate file. If you have very little ie6-specific css, you could use the underscore-hack, eg. _width gets interpreted as width by ie6 (but not ie7), that will not validate though.. – Svante Svenson Mar 05 '09 at 16:22
  • Conditional comments aren't a hack so much as taking advantage of one browser's extended feature set. Selector hacks most certainly are. – Dan Lew Mar 05 '09 at 16:23
  • @temoto: yes it's nice to keep css hacks together in one file. Some projects I've worked in didn't have a common header, but they all included a base css file. Having to backfix all of the pages to include the conditional comments would stink, so a trick like you're asking would have been great. – Crescent Fresh Mar 05 '09 at 16:40
  • Thanks for add-up Daniel, that .NotRealClass looks very interesting technique. – temoto Mar 06 '09 at 10:36
4

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.

Andrew Hare
  • 344,730
  • 71
  • 640
  • 635
4

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

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Hahaha, that's a neat trick, though every time I learn a new IE hack I feel my brain expand with knowledge and contract in pain at the same time. – Dan Lew Mar 05 '09 at 17:57