What is better: CSS hacks or browser detection?

Question

Commonly when I look around the Internet, I find that people are generally using CSS hacks to make their website look the same in all browsers. Personally, I have found this to be quite time consuming to find all of these hacks and test them; each change you make you have to test in 4+ browsers to make sure it didn't break anything else.

About a year ago, I looked around the Internet for what other major sites are using (Yahoo, Google, BBC, etc) and found that most of them are doing some form of browser detection (JS, HTML if statements, server based). I have started doing this as well. On almost all of the sites I have worked on recently, I use jQuery, so I use the built in browser detection.

Is there a reason you use or don't use either of these?

Answer 1

I prefer to use browser detection and put the browser-independent CSS into its own file.

The best solution, however, is to find CSS that is cross-compatible by default and just use that.

Answer 2

Is there a reason you use or don't use either of these?

Yes. Client-side browser-detection breaks if JavaScript is deactivated and might not work correctly with future browser versions. The last reason is also true for CSS hacks. Server-side browser detection breaks if the user explicitly tries to break it, but it still might be a viable alternative.

What I would recommend:

Make sure that you're code works in the standars compliant browsers - ie develop in one or two of those and check browsershots.org afterwards. Most likely it will be possible to implement the desired outcome in all of them with one stylesheet.

Then, there's IE. If there are only a few issues, you could go with a CSS hack. Otherwise, use conditional comments.

Edit:

If I have to support ancient browser's as well, I generally go the way of graceful degradation: I'll just let them show the pure html with a basic stylesheet (font sizes, colors, ...). All the fancy stuff will be hidden with an @import rule.

Answer 3

CSS hacks are not the way to go because browsers are updated all the time, and new updates may break your hacks, while with Javascript browser detection, you can accurately confirm the capabilities of the browser. However, another option is to use minimal CSS as to make sure that everything is working in all situations. JQuery and other javascript libraries that are for the UI have built-in detection as to the capabilities of browsers, so you should check those out.