Combining all CSS into a single StyleSheet

Question

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 will this reduce the response time?

Thanks in advance!

Answer 1

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.

Answer 2

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');