Bulletproof CSS Hacks

1. Mike D. said:

There is a school of thought that says the entire World Wide Web is a hack. I attend this school regularly.

A hack is merely jimmying something to get it to do what it initially couldn’t/wouldn’t do.

HTTP: Designed to transport chunks of hypertext asynchronously.

– The hack: Using it to download large media files, tunneling socket connections, etc.

HTML: Designed to share and display rigidly structured textual scientific documents.

– The hack: Now used to display things like images, Flash movies, web applications, etc.

Javascript: Originally invented to add a basic behavior layer to browsers.

– The hack: Now used for ad tracking, Ajax, pop-unders, etc.

And finally CSS: Designed to separate out all presentation from markup and provide a very basic means to style your pages.

– The hack: Image replacement, underscore hacks, box model hacks, faking vertical alignment, simulating hover states, etc, etc, etc.

I really think we are pretty far out from ever having an internet which is not chock full of hacks. It’s part of what makes this absolutely *not* a medium for perfectionists… whether a designer, a developer, or a producer.

Posted on September 10, 2005 09:19 AM | #

3. Eric Meyer said:

“I don’t think [too] much about IE anymore. Which is probably not a good thing, but it just seems to slip my mind until someone reminds me or shows me one of my pages is broken in IE. Still, even then I usually drag my feet fixing it.”

Don’t feel too bad, Keith– I’m right there with ya. When I’m working on a design, I have to mentally force myself to fire up IE/Win. I just don’t want to know how it’s going to screw up.

Posted on September 10, 2005 10:15 AM | #

5. Jens Meiert said:

”[…] the whole first chapter is about how to hack your CSS to make sure IE handles font sizing correctly”

Huh. I don’t know the book - yeah, slap me, I don’t care -, but this sounds strange. Is it the ol’ keyword problem (using “small”, “smaller”, and the like)? Gosh, who uses them (they are a problem)? Otherwise, I never ever had font sizing problems with IE. Never ever. For the records, I usually set up fonts with a rule like this:

html {
font: 80%/1.2 verdana, arial, helvetica, sans-serif;
}

…continuing with “em” units for exceptions. Works everywhere, scales fine.

Posted on September 10, 2005 11:35 AM | #

7. seth said:

I’m not sure I agree with you about only worrying about IE as a second-thought. Since you say you often wait until someone mentions that a page is busted in IE, I assume you don’t test in IE before moving things into production.

That comes off as irresponsible, in my view. IE still has ~90% market share, no? Even if your own site gets a far smaller percentage of IE users, you are still punishing the users.

It isn’t as if M$ gives shit. Bill Gates doesn’t get an alert everytime someone opens a busted page in IE. In fact, those using IE are much more likely to assume that the developer has made the mistake. You aren’t going to here my mother saying “oh, this page looks strange, it must be because I am using IE, and this page is coded to standards.” Instead she will just think your site sucks. Not her fault. And now you have lost a patron/reader (or at least a little of their trust/respect/etc).

Your behavior isn’t thumbing a nose at M$, it is thumbing a nose at many of your users.

Posted on September 10, 2005 01:40 PM | #

9. Dan Cederholm said:

Thanks for mentioning the book, Keith!

“A whole chapter devoted to hacks.”

Really, the only hack here is one that compensates for IE5/Win’s botching of keyword sizes, which renders text significantly different from other browsers. So, the hack is only necssary if support for that browser is needed.

But that’s true for more than just sizing fonts with keywords. As long as support for those older browsers is needed, the same ol’ hacks will unfortunately be used. I’d argue the whole chapter isn’t about hacks, but rather the takeway should hopefully be: stressing the importance for allowing the user to control text size. Whether you use ems, keywords, percentages or all three. I shared one method in the book (keywords w/percentages) but like anything, there are roughly 5,397 ways to accomplish the same goal.

I agree with you (and Eric) that it’s painful to fire up IE to check designs. There are times when I (un)knowingly refrain from checking in IE for a long stretch, only to nervously peek through my hands to see what damage I’ve done. It’s the terrible reality of designing for the web in 2005. ;-)

Posted on September 10, 2005 01:46 PM | #

11. wendy phillips said:

I think it’s important to remember that many people don’t get a choice when it comes to browsers. For example, I work for a very large company (40,000 employees) and the corporate browser is of course IE. Now most of those people won’t install something else because it’s not exactly encouraged, and therefore they will more than likely use the same thing at home. And they do.

Because we work in this industry we know about alternative browsers, but believe me, I haven’t met many people who even know what Firefox is never mind Opera and Safari - merely mentioning these provokes a glazed expression.

So, ignoring IE seems to me to only be doing clients a disservice.

Posted on September 10, 2005 04:28 PM | #

13. Dan Cederholm said:

“Dan – I didn’t mean to imply it’s all “about hacks”, only that if IE supported font resizing properly the chapter wouldn’t have been as important. Meaning, if IE got it right, do we need to talk about how to help it along? I do like the book so far though and thought the first chapter was helpful.”

Roger that. I completely see your point now. And you’re right, it’s a shame that we have to spend time talking, writing, and dealing with browser inconsistencies, and I see now that was part of your entry’s point. If IE had gotten it right, there’d have been no need for Chapter 1 at all, or it could’ve been a single paragraph or something. :-)

Posted on September 10, 2005 08:36 PM | #

15. Nick C said:

Recent changes included within IE7 appear to have broken many of the older IE hacks (such as the *html one), as has been documented on quirksmode.org/blog/ and elsewhere.

Web designers now face a problem - do we abandon all but the safer hacks (such as conditional [If IE] style ones) in an attempt to force users to upgrade to IE7 where we’re assured that CSS bugs are being eradicated? (Google ‘IE7 beta 2” to see reassuring evidence of this on the IEBlog page.)

Or must we be forced into finding clever new hacks that bridge the gap between the inadequacies of earlier versions of IE and the new improved version?

Neither solution seems ideal. Until we can safely add early IE versions to the ‘dead list’ I fear many more sleepless nights are ahead. We need to find a way to encourage IE users to upgrade to make this a reality, rather than just casually ignoring what represents a significant (around 74%) of the global audience.

Posted on September 12, 2005 08:17 AM | #