Combining all CSS into a single StyleSheet

In my application i have different css specific to browser. Like separate for IE6, IE7 and so on... also for Right to Left (languages) we have different CSS.

My question is it possible to combine the all the CSSs into a single stylesheet.

And w开发者_开发问答ill this reduce the response time?

Thanks in advance!

Yes it is possible to combine all CSS files into a single CSS file. You can import any number of additional stylesheets in main css file, for example:

@import url('ie6.css');
@import url('ie7.css');
@import url('ie8.css');

You could write css by using hacks that trigger a certain property only in specific browser.

Like:

*color: black; /* for IE7 and below */
_color: black; /* for IE6 and below */

But that will be a pain to mantain and also won't validate your css anymore. While you do reduce requests (by 1 or 2?) i still don't see the problem if you are using conditional comments to load a browser specific css for IE6 for exaple. It will still add 1 more request which really isn't much. And if you consider that IE6 is being used less and less maybe only 10% of your users will actually do that request.

If you are using separate css files for different browsers than you should just load the browser specific css file. In that case you wouldn't see much savings by combining them. In general though, you should try for css that works across browsers.

Possible? Yes. Practical? Not so much. Especially when it comes to browser specific css. You can use css hacks but IMHO they're quite ugly thing that spoil the css readability. Instead I'd use conditional comments conditional comments. That is for IE—for the rest of the world try to use one proper css.

As for time reduction, as far as you'd use static css files download speed gain would be negligible. Static files are mostly cached, so you'd save only a couple of requests returning only "Not Modified".