A Safe, Flexible Replacement for the * html Hack ✭
Sunday April 6th 2008
Time was when a web designer needed to know all the hacks to get his or her sites to display properly in all the major browsers (all right, Internet Explorer is really the main problem). Then along came IE7, and our hacks stopped working (IE fixed some of the rendering and parsing bugs, but not all), leaving us desperate to find a new way to target the atrocities of Internet Explorer.
Amongst others, we lost the * html hack.
The * html hack (starting a CSS selector with * html) allowed us to target CSS just at IE. And although it’s no more, we, as designers for the web, still need a way around the crap of IE.
Along came conditional comments, which had technically been around for years but only now really seemed useful. With IE’s proprietary conditional comments, we could serve up separate stylesheets or even content just to specific versions of Internet Explorer.
There are several reasons conditional comments aren’t awesome. For one, we must put them directly in our HTML, rather than in our CSS. Two, at first glance it seems like we’d need to create many different CSS files, one for each version of IE we need to target. These two downsides are a nuisance and make IE hacks comment-served-styles perhaps even less maintainable than before.
Then Hiroki Chalfant came up with a clever solution that gave us the ability to target IE directly within our CSS. Basically, use a conditional comment to serve an enclosing <div> with an id of "IERoot" around everything inside the <body>. Only IE would see the <div>, so only IE would have that clever #IERoot. Therefore, instead of using * html whatever, we could now use #IERoot whatever in exactly the same way. Clever clever.
This solution still leaves us with the problem of not being able to address specific versions of Explorer, something I need while creating templates for dreamscape. I’ve taken the (logical) next step from Chalfant’s method, and created separate <div>s for IE5, IE6, and IE7. It looks like this:
<body>
<!-- provides IE-named containers to allow IE-specific CSS -->
<!--[if IE 5]>
<div id="ie5">
<![endif]-->
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
<!--[if IE 7]>
<div id="ie7">
<![endif]-->And then obviously we need to put this in the footer to close the <div>:
<!--[if lt IE 8]>
</div>
<![endif]-->
</body>Now in my CSS I’m able to make a declaration like this one (a replacement of Tantek’s famous Box Model Hack):
#ie5 div {
padding: 10px;
width: 220px;
}
#ie6 div, #ie7 div {
padding: 10px;
width: 200px;
}As you can see, we can use this technique to specifically target any version of IE for just about any CSS rendering bug.
Shortcomings
I would have liked to make the <div>s have an id of "ie" and a class with the version number. That way we could target all buggy versions of IE at once, or just a specific version. However, old versions of IE (surprise surprise) don’t support selectors with both a class and an id, so no dice. If you want to target more than one version of IE, you have to write comma-separated selectors, which can occasionally get a bit long if you’re addressing something buried deeply in your HTML that needs a great deal of specificity. Meh.
I’ll update this post with other shortcomings as I discover them. Please feel free to comment with any further ideas you may have, or questions or concerns.
Shameless Plug
If you’d like to try this IE-targeting thing, but don’t really want to muck about with your code, or perhaps your CMS doesn’t give you the flexibility to add this sort of thing, you can download the latest versions of dreamscape cms from the SVN at Google Code page. The default theme, "The Neue Standard", has this feature built in.
Thank you.
UPDATE: I feel totally silly for accidentally misnaming the * html hack the “Holly Hack”. Which it’s not. The * html hack is also called the Star HTML Hack or the Tan Hack. I’ve updated this post. Thanks, Wojtek.
UPDATE 2: At John Lascurettes’s suggestion, I shortened up the closing <div> by making it a single conditional comment. Thanks, John.
{love},
{ryan}