Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Bye Bye Tan Hack

October 13, 2005

I’ve been using the Tan Hack for ages, otherwise known as * html, since it’s proven a simple and effective mechanism for combatting some of the worst rendering bugs in IE. With only a few similar alternate ways of doing the same thing available, for the past few years it has been pretty much a choice of personal preference whether you’d go with Tan or conditional comments or html > body.

At the same time, I suppose I had figured/hoped that by the time IE7 rolled around, enough sites will have implemented it that the IE team couldn’t simply break the relatively trivial hack without first fixing the much less trivial bugs it was working around.

However, it’s been clear for some time that * html was going to be fixed. And now today, via WaSP, comes news that IE7 is going to be fixing a whole lot of other hacks. Wording on the IE Blog (“how easy it is to fall into the CSS hack trap”) seems to indicate that IE developers are against hacks in general, so it’s probably reasonable to assume that they’ll be looking to fix any others in the forthcoming releases.

Of course this was irritating at first. My initial reaction is to wonder why they’re throwing out the medicine without first curing the ailment. Full CSS2 support in IE7 is still a long way off.

But it’s probably not as bad as all that. I ranted a few months ago about IE7 beta 1, and since that time the IE team has announced that IE7 beta 2 will see a pile of new fixes. A lot of the things we still need to work around in IE6 may potentially be fixed in IE7. It’s anyone’s guess as to whether the list of fixes on the IE Blog is final, but I’d be willing to wager we’ll see even more updates by the time IE7 final is released. There’s a good chance that in some cases, you won’t have to change a line of code; the float bug your hack was fixing is no longer broken, so IE7 will simply render the initial rule properly, and not parse whatever corrective rules the hack piles on. IE6 will still behave as expected, and IE7 will treat the code as any other CSS-friendly browser. Hopefully. Maybe. In some cases.

Regardless, there’s still a way out. The IE team prefers we use conditional comments, which will continue to function in IE7 and even offer specific targeting of that browser. They do exactly what CSS hacks do, in an officially-sanctioned way. The main problem with using them is simply that a lot of us aren’t yet. In fact, I’d be happy to give up the hack habit forever if all other browsers were to implement conditional comments, or a similar concept. But given how often that idea gets abused (think querystrings or browser-specific Javascript) I suppose there’s something to be said for moderation.

So, all those existing sites out there we’ve built that don’t use conditional comments? Wait and see. IE7 beta 2 should be out in the next few months, we’ll know more then.

Update: In the comments, “Agent Bishop” rightly points out that conditional comments do not work when you’re running multiple versions of Internet Explorer on a single PC. As always, Position is Everything has you covered. (Is there anything they can’t do?)

Still, it’s a pretty contorted process, and I don’t think it’s reasonable to expect web developers to hack their registry just to test web sites. I’d like to see an officially-sanctioned way of making conditional comments work with multiple versions of Internet Explorer. IE Team, how about it?

Update 2: Eric Meyer points out that Dean Edwards’ IE7 script could very well give us an easy way out of any transition headaches.


1
Jim says:
October 13, 05h

I agree, the choice between an extra hit or inline style elements is not attractive for high traffic sites. The tan hack (and most other CSS hacks) lets you include Internet Explorer styles in your main stylesheet. Validators don’t generally see the Internet Explorer only stylesheet either, as it’s commented out according to normal HTML syntax.

2
Jim says:
October 13, 05h

PS, Dave: any idea how many Zen Garden designs this breaks?

3
Luke says:
October 13, 07h

TBH I have never used the Tan Hack. I started off straight away with conditional comments because it was always IE that didn’t render my sites properly and I didn’t want to mix regular site CSS with IE only CSS.
I just hope MS don’t create more problems while they’re trying to fix IE.

4
Chris Allen says:
October 13, 07h

But even if every single problem that exists in IE6 is fixed in IE7, designers are still going to have to design for IE6.

I know the majority of web users will download v.7 but there will be some that are happy enough with v.6, (I mean there are still people using IE5 for god’s sake).

and just out of interest i use html>body

5
Agent Bishop says:
October 13, 07h

One downside for developers though –
If you have multiple versions of IE installed, the conditional comments do NOT work, as it recognizes any version of IE as the highest version installed (probably IE6).

UGH!!!

6
Dave S. says:
October 13, 08h

“If you have multiple versions of IE installed, the conditional comments do NOT work”

Oh, that’s right, I forgot about that little quirk. I sure hope the IE team meets us halfway and gives us an officially blessed way to install more than one copy of IE on a PC so we can continue to actually test our sites.

7
Jere says:
October 13, 08h

Well, isn’t that a good thing… presuming they will fix enough bugs to get rid of the most common reasons to use IE hacks. If you used that hack for something typical such as giving IE a height on an element instead of a min-height, like so:

* html #thing { height: 120px; }

There won’t be any need to change anything, because IE7 doesn’t understand the hack but will support min-height, so it should ignore the rule anyway.

Oh, and PIE tells how to fix conditional comments in multiple IE versions: http://www.positioniseverything.net/articles/multiIE.html

8
Alex says:
October 13, 08h

I’ve never understood the resistance to dynamic (i.e. server-side) stylesheets.

If you’re already ‘diluting’ pure CSS and going to the effort of writing very obscure hacks on the client side, why not take the full plunge and enjoy all of the control available with a generated stylesheet?

9
Neil Cadsawan says:
October 13, 08h

I’ve been using conditional comments for a little while now and after I read that post yesterday on the IE blog, I’ve decided to keep using the condition comment of: <!–[if lte IE 6]> to target “less than or equal to” IE6.

10
Alan says:
October 13, 08h

Re: The multiple versions of IE problem, I’ve always preferred using Virtual PC over hacking your Windows install for testing multiple versions of IE. Use a different virtual machine for each browser, and you won’t run into the conditional comment problem mentioned above.

11
Mike P. says:
October 13, 08h

“Oh, and PIE tells how to fix conditional comments in multiple IE versions”

Yeah, and not only that it can put the version number in the title bar of your IE too: two things that were a real PITA until they released this article!

12
October 13, 08h

Microsoft’s ultimate goal is to get this browser out while breaking as few sites as possible. I’m confident they will incorporate the necessary fixes for the most popular reasons we hack along with the hacks themselves.

In the slashdot example given in the IE blog, a few things stood out for me.

1) Slashdot’s mistake was using an empty legend element. If the legend element is required, it’s because the W3C recommends that you have an actual, textual legend in your fieldset. If you don’t want it do display, simply use display:none; Keeping your markup semantic is always the best practice.

2) While the W3C doesn’t specify to use white space or not for the legend element in HTML 4.01, they do say that the legend element is inline. Common sense would suggest that you don’t generate vertical white space for inline elements.

In the mean time, if you use conditional comments, be sure to do it on a version level and not simply on all versions of IE, as this could bite you in the ass more than a few CSS hacks slipping by here and there.

13
October 13, 08h

Dave, I asked a little while back if the IE team was going to be nice enough to let us have multiple versions of IE on one machine and the answer was a fairly clear “No.”

It’s unfortunate that we have to resort to waiting for someone to figure out how to hack around having only one IE on a machine. I’m sure someone will do it but you’d think with all the good stuff they’re doing for developers, that they’d give us that at least.

As for the conditional statements, I sincerely hope we don’t have to go back and fix all of our sites. It would be great if IE7 displayed the sites as you said without any need to rejigger our hacks. I know it’s not a perfect world but shouldn’t we be working to NOT use conditional statements and hacks? Browser seems like a glorified method of browser sniffing. If the IE team makes their browser behave as it should, there shouldn’t be any need for conditional statements.

Just putting it out there.

14
October 13, 08h

Sorry about the typos in the previous comment and this one pointing it out. (Should have proofread.)

15
Kelson says:
October 13, 08h

Actually, I think the main problem with conditional comments is that you have to put them in your HTML files instead of in your CSS. That means that instead of a single stylesheet reference in your document and a CSS file partitioned up for common rules, IE-6-and-under rules, etc., you have to have two links, one of which is buried inside a conditional comment, or else one link and a conditional embedded stylesheet. It messes with maintainability.

Other than that, conditional comments are *vastly* superior to CSS hacks because they rely on intended behavior and not on bugs that will eventually get fixed.

16
Dave S. says:
October 13, 09h

“I’ve never understood the resistance to dynamic (i.e. server-side) stylesheets.”

Two problems. First, what would you be testing against? The browser’s query string right? Then we’re back to the same problem started in 1998 and resulting in the rise of IE-only sites; you have to be extremely comprehensive and cover all browser scenarios to make it work right, and even if you do, the next time a major browser updates you stand the chance of having your site break anyway.

Second, server-side parsing isn’t always an option. It’s always nicer to be able to do your coding and browser testing without having to rely on a server. Not a problem for you or I (or anyone who has a local Apache install), but a problem for some.

17
October 13, 09h

I thought the whole purpose of Web Standards was to separate the structure from the presentation. That page code represents the structure of the document. Doesn’t including conditional comments add “presentation” to the structure?

Doesn’t using a “hack” keep the presentation in the CSS?

18
October 13, 09h

The big one that worries me is easyclearing. It’s the only “hack” that I depend on a *lot*. And it really represents an ugly union of several different hacks, including star-html.

“I’ve never understood the resistance to dynamic (i.e. server-side) stylesheets.”

I’ve never really gone there, but there are certain tools like Inman’s SSC that are simply indispensible. Seriously, try it once and you’ll never go back.

19
Dave S. says:
October 13, 09h

“…there are certain tools like Inman’s SSC that are simply indispensible”

Totally different beast. Dynamic, PHP-parsed CSS gets a big thumbs-up from me as long as it continues caching properly.

PHP inserted into a CSS file with the express purpose of selectively hiding or showing CSS to certain browsers based on query string, on the other hand, is not a good idea.

20
October 13, 10h

It’s a good thing I’ve never used it.
A general good rule to follow was to avoid IE only, and fix it right for moz as the secondary rule.
What I’d like to know is who’s using these hacks? Even with all the quirkiness between browsers, there seems to be a workaround for almost every design…

It is comforting to know however, that ie7 is trying to remove all hacks. We can only hope they live up to fixing the shortcomings these hacks are covering up.

21
Sander says:
October 13, 11h

Dave: you probably should talk about the user_agent string rather than the querystring (the latter of course is the part of the url after the questionmark, and so your last few comments look somewhat confusing at first).

Personally I intend to go on using such CSS hacks as I can, always with the main guideline of sending valid CSS, and having selectors which _shouldn’t_ work in decent browsers (such as * html and comments) make up for major bugs.
Most of my sites will have IE 7 trying to interpret the exact same CSS as Opera/Safari/Mozilla. It’s up to them to show themselves worthy of playing with the big boys now.

22
Justin P says:
October 13, 11h

I like CSS hacks over conditional comments because I can use conventions as discussed in [the book] Professional CSS where you have a base CSS file that is linked with a “link” tag, then your base CSS file is just a bunch of @import statements.

Using known hacks, you can target @import statements to certain browsers. Whenever support for a browser is dropped, it’s just a matter of removing a line or two from your base CSS file. No need to muck around in the markup and such.

That being said, if you create your site in such a way that it is as easy to alter your “head” markup as it is a CSS file, then I see no reason why conditional comments are any worse to a CSS hack solution.

23
Andrew says:
October 13, 11h

Also, XSLT seems to treat the [if IE] syntax, since things in [brackets] are special entites, even when surrounded by CDATA, or xsl:comment tags. These comment strings don’t work if you’re using XSLT.

24
Bryant Cutler says:
October 13, 12h

There are any number of reasons not to use the conditional comments. First of all, they can really throw off non-IE parsers (including most XSLT transformers, as noted above). Also, it seems like there would be precedence issues. For example, if you wanted to create a style and then override it with a same-specifity-but-later-in-the-css rule, but the IE rules all came in their own seperate stylesheet later, you’d have to make a copy of the rule in the IE stylesheet. Perhaps not a common scenario but I’ve run across the problem twice. IE should just adopt the rendering model of other more CSS-compliant browsers so that outmoded hacks won’t be an issue - from the article, for example, the legend element should be rendered the same way that Firefox does to avoid breaking everyone’s code.

25
Rimantas says:
October 14, 01h

Or they could implement conditional comments in CSS files…

26
Jo says:
October 14, 03h

Since IE conditional comments [IECC] are a great solution to target the IE 5 + WIN issues without any hacks. But does it cause any extra bandwidth? I dont think so since all styles are in a HTML comment, and only the targetted browser version(-s) import the styles. A <link> for importing the styles seems a better choice than <style>.

I am really convinced hacks should be avoided whenever possible, even if it validates.

27
October 14, 12h

This is just like microsoft: “We’ll support standards, but you have to use custom markup so it plays nice…”

If they do things properly, this example should work fine…

#wrapper
{
/* Standards, IE7 */
height: auto !important;
min-height: 400px;
/* IE6 */
height: 400px;
/* IE5(.05) */
height /**/: 380px;
}

Here’s to hoping that IE7 will understand “!important”. I, for one, will never use Conditional Comments. I use XSLT way too much to rely on markup to choose how to style the page.

28
October 15, 12h

I’d advise not going out of your way to support anything older than IE 6. Even IE 5.5 is representing less than 2% of web traffic these days. It’s just not worth it.

29
ChadL says:
October 18, 04h

Rimantas says: — “Or they could implement
conditional comments in CSS files…”

hehe… isn’t that what the hacks listed above accomplish? :D

Personally, I prefer the underscore hack to all mentioned above.

ie.

body {
margin: 4px;
_margin: 5px; /* IE only */
}

Kevin Brown says — “I’d advise not going out of your way to support anything older than IE 6. Even IE 5.5 is representing less than 2% of web traffic these days. It’s just not worth it.”

Generally yes, however, this all depends who you and your demographic are.

30
October 18, 11h

Am I missing something? If IE7 works like other modern browsers and simply ignores the * html hack, then what’s the problem?

31
Keith says:
November 04, 16h

Personally, though I unfortunately don’t have the luxury of doing this for customers’ pages, I never go out of my way to ensure something renders properly in IE. If I have a page that I know breaks IE badly enough, and there’s no other way (other than using hacks or an excess of tables and images) to get my design to render properly in IE, I simply add an anti-IE disclaimer.

It’s time people have it brought to their attention that IE simply doesn’t work. It’s not just a matter of poor CSS support. It’s a matter of some drunken programmer (because I can’t think of how else someone could mangle something as simple as the box model so badly) misreading the initial CSS specification when he implemented it in the first CSS-aware IE.

I don’t mind losing a few readers because a site looks stilted to them. In the fight for standards-compliance, it’s a small price to pay for the chance to make one more end-user aware that there is even a battle.

Cheers!

32
Jessica says:
November 20, 01h

Cant wait till the release I am very interested in finding out weather or not it will work.I to think it is not reasonable to expect web developers to hack their registry just to test web sites.

33
Noah Howard says:
November 22, 06h

Was it just too hard for them to actually try supporting CSS standards in their entirety like the rest of the browser world? It seems that by continuing to offer less than adequate support they are shooting themselves in the foot, what happens when CSS3 comes into its own and IE is still working on CSS2? It doesn’t seem to make sense to me.

ChadL says “Personally, I prefer the underscore hack to all mentioned above.”

Thats what I’ve been using most recently. I find that I usually don’t have to fix anything major except for margins, widths and padding and underscore suffices for that.
I think I am also going to take the anti-IE route. I don’t believe in making the effort to support them if they can’t make the effort to help me, and by removing browser hacks it just seems like they are making things worse. Maybe they had legitimate reasons though?