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?
+7
A:
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.)
Guffa
2009-04-30 20:37:10
Most of the problems you outlined boils down to setting the doctype. If you don't do that then yes, you will have radical differences between the browsers. Doctype with a css reset solves just about everything under normal usage.
Chris Lively
2009-04-30 20:52:24
No, what I have outlined applies even when you have a proper doctype and valid code. Without it you are a lot worse off.
Guffa
2009-04-30 22:10:33
A:
Neither if possible. Now that the old Netscape, IE <= 6 etc. are not longer really that much in use, I try to use features which work in all those browsers (e.g. FF >= 2, IE >= 7, Chrome, Opera).
Lucero
2009-04-30 20:37:36
IE6 is still widely used, it's something between 15 and 20% of the market share depending on the source.
marcgg
2009-04-30 21:17:05
+2
A:
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).
Traingamer
2009-04-30 20:38:21
A:
Conditional comments for issues with Internet Explorer appear to be the norm. Combined with a little bit of JavaScript, like Dean Edward's ie7.js you can mitigate most cross browser issues without resorting to hacks within your CSS files.
jakemcgraw
2009-04-30 20:46:55
A:
its better to use a different css files for Internet Explorer 6-7 (include them via conditional comments), and a hacks for other browsers.
A:
A sort of follow up is how to develop the single file that works.
The best approach that I've seen work is to start from nothing, slowly building it up and checking change by change that it's still compatible across your core browsers (especially the problematic ones).
When you get it fully working with one browser and then say "time to convert it" is when the pain really starts and where you have to start hacking.
Jon Hopkins
2009-04-30 21:08:51
A:
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.