There are a lot of tricks out there to hide css from buggy browers. They seem to get employed almost exclusively. Am I missing something obvious as to why you would want to rely on what you're limited into by those hacks and their general infathomability, rather than just sniffing the user agent and serving up the appropriate CSS? This is even something painfully easy to re-use...and it could support overrides, includes, or even full blown templating. So without a huge amount of maintaining multiple style sheets, you could serve up exactly the css to each browser that you wanted. Even generally allow the user to choose their own css or override the default setting...
Seems to me to be a no-brainer.
In case you haven't noticed, my new project is going to involve a lot of client side work....
AOL, etc. might give you fits by caching the stylesheet and giving it to the wrong browser. Then again, maybe they actually respond to the "Vary: User-Agent" header. None of this changes the fact that what you're having to work around sucks ass.
I think most of tricks outlined there are intended for simple html; a site with no app server and an author with no knowledge or time to figure out SSIs. But, even if you have a really expensive app server and you know how to use it, there are still benefits to using parsing bugs to get the dom styled the way you want it:
- all the logic runs on the client, no cpu is used trying to figure out which bits to serve to who.
- people who really understand css are familiar with these tricks, so you don't have to help fix bugs in your user agent switching or templating system
- it's forward compatible. you are not keying css code to a user agent, you are keying it to the renderer's css capability, which will always work. (This gets sticky when you use one capability test to branch css for another capability, but you shouldn't do that :)
Also, just because it's a kind of confusing trick, that doesn't mean it has to be unfathomable... something like this is pretty clear even to peabrains like me:
.masthead, [hideThisFromIEBecauseItsBorderSupportIsWeird] { border: thin solid red; border-left: none; border-right: none; }
I actually use this technique any time I have to do css, because it works so well.
This is Rob Meyer's weblog, a weblog focused on software development and system administration based on 10 years of experience. Want to explore further? You can find out more me or see the rest of my website.
Wondering if I've written on something in particular? Try searching:
You might want to take a look at some of the more requested postings (as judged by incoming traffic):
Want more? Subscribe to this site 
or contact me at rob at big dis dot com.
See my writings on: