What is the correct way to deal with css browser compatibility?

Question

Is it better to have a different CSS file for each user-agent or is it better to use CSS Hacks that only certain browsers can see?

Answer 1

Neither.

The best is to write code that works in all browsers without the need of browser specific code or css hacks. It's of course not quite as easy to accomplish, which is why many people use the other methods.

The key is to avoid things that some browsers (very often Internet Explorer) has problems with. One such thing is to use padding rather than margin, because IE doesn't handle margin collapsing correctly.

Some methods that is in the border line of being hacks is using code that doesn't affect browsers that work correctly, but fixes problems for a specific browser. That could be things like specifying a height for an element that normally shouldn't need one, or specifying display:inline on a floating element.

The page Position is everything has examples of some bugs and suggested fixes. (Often the fix is some kind of hack, so you should of course also consider if you can avoid the problem altogether.)

Answer 2

It's better to do neither.

A good css-reset and css that works the same cross-browser is a much better solution.

If your design absolutely precludes that, then (and only then) would I try hacks or IE conditional comments.

I haven't yet seen the need for mutliple css files (beyond a few IE6 corrections addressed via a conditional comment).