KuraFire Network

Despite me having become quite silent the last few months, the scarcity of activity on this site hasn't affected traffic much at all. To commemorate (read: challenge and test) that, I figured I should throw in a semi-controversial poll to see where people stand these days. The question is as follows: are CSS hacks a useful tool, utter evil incarnate or a sign of laziness in the web developer that uses them? Elaborations after the cut!

There is a general agreement that CSS hacks are not exactly ideal, but we're not living in an ideal world where browsers all render CSS-based designs consistently (or, at the very least, muck things up consistently). However, I'm sure that there is still quite a bit of controversy between the thousands of members of the Web Standards community as a whole, regarding the exact positional nature of CSS hacks in the good-evil-Switzerland spectrum. Yes, that was a poorly constructed pun.

As is usually the case, I believe the real truth lies somewhere in the middle, but lately I've been edging strongly towards the Laziness-answer more than the others (I used to be in the Evil-camp, roughly speaking). This makes me curious to hear how others perceive the state of CSS hacks, their place in our world and the amount of Good, Evil or Laziness they ooze via their subliminal bits and bytes.

Useful tools of the trade

The advocate of CSS hacks: While obviously best to be avoided, CSS hacks are a useful tool when used with great care and understanding, as they allow you to support older browsers more easily.

The intended use and application of CSS hacks originally has always been a bit of a blur to me - it is my understanding that it was more about being a necessary evil, a workaround until a better solution was found, rather than anything directly applicable like supporting older browsers. To note, the quote above is not a real-person quote, it's just perception that I'm throwing in here as an example. Obviously, CSS hacks' advocates have some reason that works out in their favor, I just don't really know of one that I consider remotely valid. But I'm biased! So please, feel free to fill in.

The Dark Lord himself is behind them!

By the way, that title is not some snarky comment on Tantek's clothing style, it is merely a perspective placed in the utmost state of hyperbole. Also, I don't think Tantek should be blamed for the fact that CSS hacks have become part of the problem they were made to solve, just because he invented the principle (and first hack, as well as many others as time passed).

The opponent of CSS hacks: CSS hacks open up a can of worms and generally cause as many problems as they solve, in the long run. They should be avoided at all costs, even if it means adding more workarounds or markup.

This fairly extreme point of view is less practical, especially when it comes to producing sites for clients who want to support certain older browsers while at the same time maintaining a very strict deadline, but good arguments can be made in its defense. After all, shunning hacks entirely while delivering pixel-perfect (or close enough) pages that look the same all the way back to IE5 on the Mac is a sheer impossibility - or is it?

Hacks are superfluous, using them just means you don't know how to code CSS properly!

Whoa! Easy tiger, let's not get all arrogant and condescending here!

While there are definitely examples (even in high-profile production sites) that prove that it is possible to maintain pixel-perfection (or close enough) across browsers old and new (but not ancient, like Netscape 4.7), there are some things to be said here in favor of CSS hacks.

For one, not every CSS developer out there has had years of experience building CSS sites and working their way around browser issues and discrepancies. CSS hacks can prove to be a good temporary tool, a workaround that both solves the problem at hand - dirty as it may be - while educating the developer about CSS and browsers a little bit more.

Another argument is that one simply cannot generalize about browser problems like that and pretend that every issue can be accomodated without resorting to hacks. Some browsers simply are terrible and demand more than clean workarounds.

Nonetheless, I feel there is some validity to the Laziness-claim, at least when hacks are being employed by developers who have some moderate experience under their belts already and who ought to know the various ins and outs of both CSS and browsers in general, enough not to rely on them for permanent cases. A quick use of a hack to meet a deadline and make browser X behave? Sure. A repeated use of a hack or a permanent use of a hack even though alternative solutions could and/or should have been implemented by now, eliminating the hackery? Not so much.

Again, there are always cases where hacks are (probably) inevitable no matter how good you are or how much time you spend on it. That said, there are still many that employ hacks when and where they really shouldn't, simply because of the Rule of Modern Laziness.

The Rule of Modern Laziness

Good web developers of today build their sites and pages in one of the most standards-compliant browsers first, and then test in older browsers second. This means developing in either Firefox, Safari or Opera before testing in all other browsers (most notably IE). This is good practice, but it comes with a catch: your practice may make you become lazy.

Perhaps the following reasoning seems familiar to you: "I've built this page in Firefox, and both Safari and Opera render it exactly the way they should, but IE messes it up entirely. IE is known for having poor CSS support by comparison, so it must be IE's fault. Guess I'll have to use some IE-hacks to make it behave properly."

Raise your hand if you've had this train of thought (the general gist of it, anyway). Raise your other hand if you've proceeded with that plan and employed IE-only CSS hacks (via IE-comment includes or otherwise). Congratulations, you now officially look silly. You can put your hands down again.

What happens here is that you inadvertently lead yourself to believe that the CSS solution you came up with for the page is the right one, because it works well in all browsers that support CSS properly. The reality is that you've merely found a way that is correct according to the CSS specifications, but as we all know, CSS is that pesky language where there are a thousand-and-one solutions to every single problem - meaning, you have found one way out of many and it could well be that one of the many other approaches might actually be better than yours. Not because you suck and "by-god why on Earth did you use this particular technique?", but because you haven't exhausted all feasible alternatives yet to see which one works best across both modern and older browsers.

And you figured that you didn't have to, because it's just that crappy older browser that's doing it wrong, anyway. Not your fault, right?

You'd be right, it must be said, but that's still no valid reason not to explore alternatives that use different CSS tactics to produce the same effect, without resorting to CSS hacks. Sound tedious? You betcha! Is it the real best practice? I firmly believe it is.

Without turning this into a lengthy article on how to explore alternatives in CSS-based design, I'll leave you with a very simple, straightforward example.

Imagine you have a few elements in your page, and most of them either contain at least one or more elements or are contained in at least one element. It's a classic box model scenario where you can run into issues when applying widths, margins, paddings and borders to the various elements. Now, if you have a div with some p elements and an ol with several li's in it, you already have a plethora of ways to turn these elements in a nicely laid-out page. A width can be applied to the container, or to each element inside it. They can all have certain padding added to them, shifting the position of the actual content boxes around. Same with margins and even borders.

Some approaches in such a scenario will work just perfectly fine in new browsers, but break down horribly in others. Careful styling to avoid box model issues entirely would result in a look that works perfectly across all those browsers. If your use of a padding on that ordered list isn't working out for you, try using a margin instead, or a combination. Or, go wild and use borders - sometimes those simply are more reliable.

The point is, when you do CSS design for a while you will get the hang of it and toss together some proper CSS styling that works well in modern browsers, but that might trigger all kinds of box model issues in older browsers like IE5, or maybe cause some quirky behaviour in Opera. Who knows! But just because your first attempt may work flawlessly in new browsers doesn't make your solution itself flawless - in fact, chances are it is too much of a modern browser-oriented implementation, tempting you into using CSS hacks.

This is what I leave you with. If you have an opinion on CSS hacks that you feel I haven't properly addressed in this piece, please share it with us. Obviously, if you disagree with my assertion I urge you to raise your concerns. I believe CSS hacks haven't been discussed thoroughly enough with the Laziness-angle in view, so I'd like to see some differing opinions here.

Bookmark: Newsvine del.icio.us Digg