Confessions of a style sheet hacker
What? I have to say it? That’s fine. I admit it. I’m a hacker. Not the sleazy kind that steals identities and credit card numbers. No.
I’m a style sheet hacker.
But it’s not my fault, see? THEY made a promise and they didn’t keep it. Cascading Style Sheets were the future of web development. Every browser rendering crisp, clean, tableless layouts. The pure separation of presentation from content, faster load times, easy maintenance, better accessibility, portable code. So beautiful. So beautiful.
And all a lie.
Browser manufacturers couldn’t get their acts together. What, they couldn’t read and implement a standard? Instead of doing it right, they left the dirty work to people like me. Made me clean up after them. Fine. That’s fine.
The only IE CSS hack you should need
When I made the jump from table-based layouts, I knew there’d be some compromises and I’d heard about Internet Explorer. The so-called “box model bug”. The doubled float-margin. The 3-pixel gap. How was I supposed to build a nice, cross-browser layout with all that? I needed help and went looking for it.
That’s when I heard about this guy. Edwardson Tan. He’s the one that got me started on CSS hacks with the Tan Hack. It looks something like this:
* html div { /* IE6 styles go here */ }
That asterisk is the universal selector and it matches any element. The thing is, nearly every browser accepts that the html tag is the outer-most element. Every browser but Internet Explorer 6 and older. For some reason the geniuses at Redmond built those browsers to think the html tag is wrapped in another unknown element. So you can target just IE6 and older if you put * html at the beginning of the selector. Slick, right? It’s the only CSS hack I use.
And, of course, I always code under a strict doctype. That forces most browsers to render in “standards mode” instead of “quirks mode” where a lot of the problems are. If a tableless layout gets rendered in standards mode and something’s messed up in IE7 or 8, I know I have to find a different way to style things. Then I use hacks when IE6 doesn’t get with the program. But that’s rare, and then it’s just the Tan Hack.
Conditional comments: The alternative to CSS hacks
So now I’m in this program. Not sure it’ll take though. They keep saying, “conditional comments are the proper way to apply alternative styles to different versions of Internet Explorer”. Yea, right. I say conditional comments are how we know Microsoft screwed the pooch. Why else would they support a special filter, really a proprietary hack?
The basic conditional comment looks something like this:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-style-sheet.css" /> <![endif]-->
That would include the linked style sheet only in Internet Explorer versions 5 and newer. Notice the opening and closing code is <!-- -->, which makes conditional comments just a fancy version of standard HTML comments. Because they’re an HTML construct, you can’t put them in your style sheet out of the way. They have to go in every page of your nice, clean markup. So you either have to include IE styles in your XHTML (bye-bye separation of presentation from content) or create a separate style sheet. Brilliant.
If you want to target specific versions of Internet Explorer, there are some special operators you can use in the opening comment tag. Here are the most useful ones with examples:
/* version number – Apply to the version specified */ <!--[if IE 6]> /* gt – Apply to versions greater than that specified */ <!--[if gt IE 6]> /* gte – Apply to versions greater than or equal to that specified */ <!--[if gte IE 7]> /* lt – Apply to versions less than that specified */ <!--[if lt IE 8]> /* lte – Apply to versions less than or equal to that specified */ <!--[if lte IE 8]> /* ! – Apply to all versions NOT the one specified */ <!--[if !IE]>
Messy, messy, messy. Until we all join together and bring down IE6, I’ll stick with the Tan Hack thanks. Clean, simple, and gets the job done.
My name is Jason, and I’m a style sheet hacker… but it’s THEIR fault.
And you? Where do you stand on CSS hacks? Do you code by the rules or have you hacked and filtered with the best of them? Let us know in the comments.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
17 Comments
I’ve used hacks when necessary, although less so these days. I’m lucky enough that I’ve been able to largely phase out IE6 support on a lot of the sites I’ve worked on in the last year (…although watch, now I’ve said that my next few contracts will no doubt have to focus on IE6 users).
I have no particular issue with conditional stylesheets. I don’t think it’s very messy when you’re linking to one (or max 2) in your header. In fact it’s a reasonably elegant way of acknowledging that all browsers still have differences in how they render stylesheets. There’s a number of times when I’ve wished that the likes of Firefox or Safari allowed for conditional stylesheets as well – acknowledging those differences rather than taking the idealistic viewpoint that they’re fully standards compliant and render everything the same…because they don’t.
I like the idea of coding entirely in strict standards, and working from that basis. Might be something I have to focus on doing more often.
I, too, confess to hacking style sheets. I still use a conditional style sheet for IE >= 7.0 when necessary, but just last week I finally buried Internet Explorer 6.0.
And I feel good about it. Free at last, free at last. Never again will I be burdened with hacking a site together to satisfy IE 6.0.
In fact, I wrote a rather humorous post about my decision to abandon IE 6.0 here:
http://www.1955design.com/2009/10/22/goodbye-to-my-old-friend-internet-explorer-6-0/
If you are a fan of the Seinfeld show or the character Kramer on that show, take a look at my post.
BTW, thanks for confessing to the world that you are a hacker. :-)
Wow thanks for the Post! This will definitely help me to minimize my HTTP requests and in tern create faster sites.
Also mean I don’t have to worry about that silly conditional syntax!! If i don’t use it for a while I generally tend to have to look it up but with this its just:
* html [regular css]
Thanks again much appreciated as always, keep up the great posts!
I feel as though a -lot- of css out there today is hack-ish, failing to use selectors, shorthand, and bug-fixes in a clear and concise manner. I know mine certainly fits the description :)
I’ve actually gotten to the point with my coding, that I no longer need to use hacks, because CSS just comes easy to me. The only time I use them now, is when a client hands me a crazy site coded by someone else that doesn’t cooperate when using correct code, because it’s really that messed up. lol :)
I used to use hacks…. but to be honest, its not that difficult to do it properly. People concerned about HTTP requests i think is a little silly. You’re telling the browser to make one different request.
Just personal preference.
Ill stick with my conditional stylesheets. Have a look at http://www.stuffandnonsense.co.uk/ in ie6. No hacks, just a beautifully simple stripped version using universalie6 styling.
To hack or not to hack. Well, it used to be a necessity. Not so much these days unless you want to pull off some really crazy designs.
In my past I would go after some unique design elements, but these days I’m more practical. Fill the client’s requests. Solve the client’s problems. Get the job done.
Occasionally I’ll have to do some version of the IE-specific conditional magic. But I just try to design around hacks instead of requiring them.
Reset stylesheets and conditional statements have taken care of the vast majority of quirky browser issues i might’ve run into previously.
Conditional CSS Statements = Your Friend
Great post….never tried that tan Hack as such..but i’m more comfortable with conditional comments even though not a good way to apply a hack for IE. AS for the doctype, i think i need to start using strict doctype for all my future projects…
I hack to save double-margins and collapsed divs from float.
I am Greg, and I hack Stylesheets.
CSS hacks are based over a wrong assumption: only “that browser” will understand and use that hack. On the other hand, hacks are noise for every browser so there is a little contraddiction here … you say you hack because of IE6 and you are creating “noise” for 80% or more browsers? The conditional comment is way betters. If your concern is the request, you are asking just one more file only for the Jurassic browser: IE6 – If your are concerned about file-size, you are putting noise and extra bytes for every other browser, still 80% or more (depends on your target) so while you think you are “speeding up” things thanks to a single missed request, you are slowing down every browser but IE6, which is already the slowest, it will bring down by itself in few other months, and we should never be worried about IE6 users unless specific and hilarious cases.
How can we all bring it down otherwise?
In few words, under the flag “less requests and better performances” the only browser that will match these “ideas” will be exactly the one we all would like to bring down: IE6
CSS hacks are a bad practice while conditional comments could be considered a “feature detection” so if I was you, I would change my mind ASAP.
Regards
Thanks for your comments everyone. Nice to see some fellow hackers in the bunch. :)
Amber — I’m in the same boat. I rarely have to use hacks at this point, but every once in a while I need a quick fix for something and the Tan hack always does the trick.
Andrea — Unfortunately, I don’t think IE6 is going anywhere soon. I run a few sites in different niches and, depending on the topic, you’d be shocked and amazed at the percentage of visitors still using it. I agree that CSS hacks aren’t a “best practice”, but I prefer a one- or two-line hack when necessary over including conditional comments on every page of markup. When that greatest of days comes when Microsoft officially ditches IE6, I just have to delete those lines from my style sheets and the sites are clean.
I don’t hack my style sheets, I just don’t support IE6.
Great article Jason. A couple of years ago I was introduced to the “CSS Hacks & Filters” text which became my best friend.
Over time though, I’ve come to rely on it less & less and I’ve moved to a conditional comments with browser targeting. It’s a pain in that they have to be present on every page, but by using a common include file, maintence is minimal.. My IE6 specific CSS sheets usually contains 5-10 lines at most. I’m ok with the additional HTTP request for affected browsers.
In an ideal world it’d be great to say “you know what I’m gonna forget about IE6, it’s an obsolete browser so it doesn’t matter anyway”. If you do, you’re making a huge mistake. Some people by their very nature are resistant to change. Not to mention the fortune 500 corporations that have IE6 is their standard browser & an IT policy that dictates no upgrades.
As web developer’s it’s our duty to ensure our is available to as wide an audience as possible – and that includes IE6 whether you like it or not.
Not until the big sites begin to drop IE6 will we be able to follow suit.
Cheers!
-PD
I think you forgot to add that in “strict-mode” the * html does nothing.
http://css-discuss.incutio.com/?page=StarHtmlHack
A second possibility is to use PHP to detect user_agent and thus add the needed changes to the code where needed.
A DIV around an HR (styled with bck-IMAGE) only for those with IE7 and down.
Stephan — To clarify, the Tan Hack does work in IE6 regardless of the doctype. And since IE6 is a problem child even in “standards” mode with a Strict doctype, it’s the easiest way to target that browser with select styles. I like your idea to detect the browser through PHP, but remember that that’s not always going to be reliable.
Awesome post. Though to be fair, I try my hardest to write code that isn’t going to fizzle in IE6+ – though, unfortunately, this does not always work out. I usually use conditional hacks or see if I can implement things differently to make it work cross-browser, but I like this hack a bit better.