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.
* 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.?
Short answer:
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.