overloading cascade style sheets

Question

Hi all,

We have a project that will need to work in IE6,7,8.

I'm not that experienced with stylesheets, however I know there are various ways to load stylesheets depending on browser type.

My question is, is it possible to have a Master stylesheet that all of the browsers will use and then import an additional one that overwrites various styles to account for browser implementation, or do I need to just have one CSS per browser that will have mostly the same code in it just different when workarounds need to be done.

Perhaps I've been doing too much OO lately and I'm used to my nice inheritance etc.

Answer 1

I would definitely take advantage of the cascading nature of the stylesheets.

I would include a base.css and then if you wanted to, add a stylesheet on a per browser basis.

However, I wouldn't recommend it. Generally, you can get IE6 + 7 to play ball without the need for a different stylesheet.

However, if you can't, check out conditional comments.

Answer 2

No sites I know of actually manually keep different versions of a big CSS file for each browser. Usually, they just keep a main stylesheet and sub-stylesheets as per in the first case, but merge them together using a script into a static file. Maintaining a different copy of all of the CSS styles for each browser is just not worth the trouble.

The two ways you listed both are valid, and have their own advantages:

Master stylesheet with sub-stylesheets for each browser: This method is simple and works well normally.

• Pro: It doesn't require you to have a script to merge the browser-specific stylesheets with the main stylesheet before they're displayed to the user.
• Con: More pages need to be loaded, and this might be a bit slower; CSS precedence problems may be harder to debug, since the CSS is spread across multiple pages

Merged master stylesheet and browser-specific stylesheets: This method is ideal for big (and I mean big) sites that have lots of requests: (e.g. Yahoo, which has this CSS file that accepts a query string to merge CSS files); the Pros and Cons are basically the converse of the above.

I recommend that you simply choose the first solution unless your site is very big; with PHP and server-side browser detection, the code might be like this:

echo "<link rel='stylesheet' type='text/css' href='/css/main.css' />\n";
$browser = get_browser(null, true);
$browser = $browser['browser'];
if ($browser == 'Firefox') {
    echo "<link rel='stylesheet' type='text/css' href='/css/firefox.css' />\n";
} elseif ($browser == 'Internet Explorer') {
...

Please note that it is best if your design requires no browser-specific CSS at all. Most of the time, it is not necessary and caused by a bad understanding of CSS attributes. To fix minor default browser discrepancies, a CSS library such as YUI reset can be very helpful.