Search code examples
cssstandards-compliance

Strict vs Hacky CSS - Which is preferable


It doesn't take long to realise when using css that certain things are not cross-browser friendly.

For example, when I wanted a semi-transparent png I had to give IE something ridiculous like:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

I've had problems with positioning and pseudo-selectors etc. as anyone who has played around with css for more than 20 minutes will have encountered.

  • To solve problems sometimes I start out deciding that I will only do what all the browsers support and support in the same (or at least a fairly similar) way.
  • Other times I just chuck in conditional comments and give IE it's own stylesheet.
  • And then on other occasions I simply use css hacks to exclude certain browsers from reading particular bits (like the old "* html {}" or "html>/**/body {}")

So my question is, which is the best option. The first is pretty limiting and you end up developing for what IE6 is capable of doing but the other two feel a bit mucky. So which is the bets in terms of programming practices, rendering efficiency etc.?


Solution

  • Short answer:

    • Do your best to adhere to standards
    • Be creative
    • Stop using hacks and start using conditional comments

    In the long run, CSS hacks are just going to pollute your stylesheets and make them more difficult to maintain. Avoid them wherever you can, and use conditional comments with IE-specific stylesheets instead (since most hacks cater to IE). I can guarantee that CCs are much less mucky than hacks, if mucky at all.

    You do not have to be limited by IE all the time. There's a concept called progressive enhancement, which means you can make your pages look slightly prettier in modern browsers that support advanced styling, and so on. There's nothing wrong with using CSS3 properties like border-radius today, since browser vendors are working (relatively) quickly to bring support for these to their products.

    But then there are clients, which would be a different topic of discussion. I would say, though, strike a balance: educate your clients and be creative, but don't try to do anything too smart or fancy. And please, just avoid CSS hacks unless it's half past 4 in the morning and you're downing can after can of beer and just want to get something done in whatever circumstance.