/tech home / projects / personal 'blog / about


ARCHIVE: Hacks: Punishment for others' mistakes

Tue. Jun 14th 2005, 06:58pm:

One of the cleverest things that your up-and-coming web designer can do these days when creating a nice, valid CSS/XHTML Strict webpage is make generous use of CSS Hacks. CSS Hacks are some pretty ingenious workarounds to overcome the pesky CSS flaws that plague older versions of most browsers. Additionally, using hacks also makes it easy to make sure that the current versions of different browsers render the content identically. While most of the hacks are pretty simple, things can get complex quite easily. Basically there are two types of hacks: cross-version (same browser, different versions) and cross-browser (same "relative" version, different browsers).

I discourage the use of CSS hacks profusely. Remember, when you use such hacks, you're supporting developers who don't make standards-compliant browsers. You're basically telling them, "Hey it's ok that your browser can't render two nested blocks of <div> tags, because I am so clever that I figured out how to workaround that problem."

I'm glad to see that I'm not the only one who wants to keep CSS simple and wonders if everyone's trying to fix the wrong problem. I think if you are generating browser-specific style-sheets via code, based on the User-agent, to "avoid" hacking CSS, you're pretty much contributing to the problem no matter what your intentions are.

Let's imagine the same thing happening in the music industry. Gramophones are equivalent to version 3.0 browsers, audio cassettes - version 4.0, CD players - version 5.0, and MP3 players are version 6.0 and above of the music industry. In both cases (music and browsers), each successive version renders the content (songs and webpage) with a higher fidelity and quality, while giving the creators (musicians and designers) more features and tools to improve their technique and presentation skills for stronger impact. The percentage of population with either a gramophone or version 3.0 browser is very small. A higher number of people still have audio cassette players and version 4.0 browsers with the primary difference that the cassette player owners know that nobody's making tapes anymore, so they either listen to old music or get a CD player at the least. As web designers, our problem is that 4.0 browser users don't want to upgrade due to a myriad of reasons and we feel like we need to support them. I think not. Do the latest songs come out in tape format anymore? I don't think so. So why bother making sure Netscape 4.x renders you page nicely? Don't use CSS hacks for providing cross-version compatibility especially for 3.0 - 4.0 versions. Why waste your time when they can upgrade for free?!

However, when it comes to cross-browser compatibility where the relative version of the browsers is the same, i.e. Opera 7+ vs. IE 6 vs. FireFox 1.0+ then you pretty much have to make sure the pages render correctly. This is where the hacks are most effective. So what do you do? Spend 4 hours making sure that your 3-column centered layout works perfectly fine in all the browsers, especially MacIE5.5, because at most 3% of the users have Macs and less than 3% use IE5. You're better off spending the same amount of time improving the site's content or actually planning ahead - does your site look good in a mobile/phone browser? Soon there'll be a larger percentage of population viewing websites on phones than on Macs with IE5.

Of course, you could've used <table>s and avoided the CSS problem altogether but you didn't want to dirty your pristine CSS-XHTML code. Well nothing wrong in sticking to the standards. If only they had listened. Can you imagine if a CD made by Sony wouldn't work on a Panasonic player? How about CDs that only play on Hitachi players unless the singer positions the microphone at a 29-degree angle during recording, while holding his nose with his left-hand, balanced precariously on a pogo-stick, provided he didn't eat bread that morning? That's a hack. And we shouldn't have to face that every single day.

(On a side note, sadly with MP3 Players, the music industry is learning from the browser coders. Apple's music won't play on my Creative Nomad and Napster can't transfer songs to an iPod. Yes, I know it's all because of the dreaded DRM, but as a consumer, it plain sucks when content that I legally purchased cannot be transferred on to a different medium.)

The need for CSS hack wouldn't exist if every browser-maker had stuck to the standards. If your HTML code is broken (un-closed tags, badly nested tables, etc.) then it is up to the individual browser to try to render it the best it can. Some can do it, some can't, and some can be fixed. Maybe there should be standards on how broken code should handled but that's wishful thinking. However, if all you have on your page is a <div> tag with 1px border, 5px padding, and 5px margin-left, then EVERY browser must render is exactly the same. Even simple things like nested divs and display:none/display:block don't work across all the browsers in a similar way. Pretty sad.

So what do all of us as a collective group do? Strut our cool CSS Hacks, of course. What SHOULD we do? Well for one thing, absolutely stop advocating the use of such hacks and stop wasting our time thinking of cooler ways to inforce cross-browser compatibility from our end. If you have the time, get more people to use standards-compliant browsers. If you have the knowledge, then make the browser-developers understand the need for cross-browser compatibility. And if you have the voice, tell the powers that be that maybe, just maybe, we should fix broken things first instead of making the web more and more complex.

I see two groups of people to blame here: People who make the hard-to-implement standards and people who break the hard-to-implement standards. I don't understand, and being a commoner I probably never will, as to why the "target" attribute was removed from XHTML-Strict guidelines. Maybe it's coming back but what in the world would removing an often used attribute accomplish? Will Toyota ever get rid of the tachometer? If I hadn't added some JavaScript to the onclick() event of every <a> link tag and preferred to use "target" instead, then this page wouldn't validate. Some say, but the web designer should not decide if the links open in the same or a new window, leave it upon the user. Sure, sounds good but what if the users want the same? What if I know my users and they prefer that the links open in a window of their own, without having to right-click and select "Open in new window" each time? Think of a busy 'blog/link site like Fark. Then I have to stick to pesky JavaScript hacks. Sometimes people want to open links in new tabs instead of new window. Sure, then add a target="_tab" attribute or even give preference like target="_tab, _blank" and let the users select or not the browser setting for "Prefer to Open New Tab." Just because the target attribute doesn't hold some intrinsic semantic value doesn't mean people don't use it and don't want it. I can understand making the "alt" required for images but why remove commonly used attributes like "width" and "height" attrived from <td> tags?

The issue is not that the common web developer is using syntax that is not semantically perfect, but rather the consortium whose purpose is to "develop specifications, guidelines, software, and tools to promote the Internet's evolution and ensure its interoperability" keeps making sure everything we use gets thrown out and replaced with some ideal-perfect syntax. Ignoring the fact that using tables is not the best way to lay out a personal 'blog, why should the standards prevent me from doing so when it's clearly not preventing the browser-developers from half-heartedly supporting CSS2.0?

We, who want to write clean code that validates strictly are being punished because the browsers aren't doing their job. If the new BMWs doesn't drive as marketed, I'm sure someone's getting fired and somewhere a class-action lawsuit is brewing. The driver is not supposed to get out of the car, do twenty-seven cartwheels, recite the Chinese alphabet backwards, and change the oil every time the highway asphalt is repaved. Sadly, not in the computing industry because the developers are answerable to no one. And neither are the folks who want me to follow millions of guidelines when making a webpage yet do nothing when a browser doesn't function as it's supposed to.

So what should the average (or above-average if you will) web designer do when he/she has to make a site that thousands or even millions of people will use? Keep it simple. Don't think of adding fancy tricks that necessitate the use of CSS/JavaScript/script-backend hacks. Keep the use of hacks to a bare minimum, enough that 95%-99% of the users (depending on the size of your user base) can view your site. Don't write 4 different style-sheets for 4 different browsers. You're wasting time for no obvious gain in efficiency. It's unproductive and it gives the browser developers a reason to not give a damn.