Is it a good technique to load different CSS for different browsers?

I have designed many web-templates. But (except my first one) I've never used browser detection scr开发者_开发问答ipts to load corresponding CSS.

I am not sure whether it is a good technique, or just an alternative way (to struggle with a single CSS to satisfy all the browsers)?

It depends on how complex your layout is.

On the whole, there are a set of "problem features" with some browsers, such as the browser not following the border-box model and assigning margin, border and padding values incorrectly.

Many designs aren't affected by the problems and look very similar in all browsers, but if you have a part of your design that has a touch point on one of the issues, it is probably better to extract the "fixes" into a separate stylesheet, rather than pollute your standard CSS with hacks.

You should find that you have

1 Stylesheet for "standards compliant browsers"

and

1 Stylesheet to cater for any issues with the others

If you have more than this, you're creating trouble for yourself and are juat adding to the number of http requests for the page.

Most commonly people use conditional comments in Internet Explorer to load a separate stylesheet for just IE, and a default one for all the others.

More info on MSDN

The best option is to use a css which is compatible for each (major) browser. So the question is; do you really need browser-specific-css?

If you really need it; you can use:

<!--[if IE 7]> <link rel="stylesheet" ....> <![endif]-->

From my experience I would always try to avoid to really fall into the specific-browser-CSS-trap. Try using CSS-reset-methods and from a fresh start build for a defined set of current browsers. I would rather try to make little changes to the designed layout to get it working as so much time can be saved by that (if it's possible in the project or the designer is cooperative).

Another aspect where it would make sense is an approach like the one Andy Clarke talks about in his nice book (Website http://www.transcendingcss.com/). Use latest tags and all options that make your code and CSS simpler, shorter, more semantic - even if it results in explicitely different look and feels for, e.g. Firefox and IE.