CSS Hacks Are Just A Way Of Life
I’ve been developing websites for many years and I’ve seen my share of ridiculous browser bugs. If you’re not familiar with developing websites for Internet Explorer, here are a few of the nastier bugs that creep up:
Elements disappearing, layouts borked, forms not working correctly, these are all things that occur within IE version 6. IE7 is far better in its handling of rendering issues, but the problem is that people still use IE6 and you have to worry about them. The IE6 version of 9rules.com is a little ragged but it is about 98% the same. The only reason I was able to do battle against IE6 somewhat successfully at 9rules is that I knew what to look for and I knew how to fix the issues, most likely with the underscore hack.
The underscore hack is called a hack for a reason, it invalidates your CSS. However on the other side of the argument is that it works. It easily allows you to make a website work in Internet Explorer 6 and, in the end, if it works then it’s fixed. At least in my world… the world where sites need to be made live on a schedule and IE6-wielding visitors come to your site in double-digit percentage hordes. It works but it’s not pretty.
Another option is to serve a completely different CSS file to various IE versions using conditional comments which only IE understands. This is a cleaner separation and is preferred by many (I’ve used it, it works nicely) but the thing to keep in mind is that it’s still a hack. It’s a non-standard way of sending style data to IE while ate the same time sending style data to other browsers.
Oli, one of our big users at Chawlk, posted this comment:
“There are few reasons to *need* to hack CSS. You can usually get around the problem by refactoring your XHTML.”
Now, I disagreed with that, mainly because I’ve worked on specific issues that I don’t think could be fixed by refactoring XHTML alone. It’s true that many designers think they need to hack their CSS to make something work cross-browser, when all they really need to do is use best practices in developing their CSS-based layout from the onset, but there are small cases when you have no choice. Sometimes you have to serve different CSS files, different rules, JPGs instead of PNGs, etc.
But hacking your code should be your last resort. My general rule is if I spend a solid 30 minutes trying to work around a rendering issue within CSS and still can’t make it work, then I’ll pull out the hacks. At the end of the day, I just don’t have time to be messing around with IE issues and I need to make it work. CSS hacks just work, and I use them, and will continue using them. You should too, but be smart.
Martin Bavio # —
“CSS hacks just work, and I use them, and will continue using them. You should too, but be smart.”
Really really wise advice. Hacks work, the problem is that most “web designers” blaims IE6 for their lack of knowledge of XHTML, for example, they have a code with more than 10 html validation errors…
Mike Rundle # —
Martin one thing I’ve found is that even though IE6 (and 7) have buggy rendering engines in some aspects, in other ways they’re a lot more strict about what they accept. So many times I’ve found a rendering bug in IE6 that I get annoyed at, only to find I’ve missed a closing
divtag and Firefox/Safari accepted it no problem. Coding up designs to work in IE6 keeps me honest.tdhedengren # —
The 30 minute rule is a good one, Mike. Nice post, I agree wholeheartedly.
nemetral # —
Using CSS hacks is not a shame. You’re right, definitely. And even though it invalidates your website, then what? Who will check the validation anyway? CROSS-BROWSING is the ultimate graal, not W3C validation. If your website validates, that’s a plus. But it’s ONLY a plus.
Martin Bavio # —
@nemetral:
I dont agree with you, validation helps a lot to assure that your site will work no matter what. BUT, CSS hacks are needed for the loving IE, so we use them. The diference is how we use them. I personally choose to use them in conditional comments, seems to me like the smarter way.
@Mike:
Yes, I´ve seen that too. IE is stricter sometimes, that has to be the only GOOD think of it, isnt it?
Post A Comment