How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)

In an ideal world, you only need one set of CSS style sheets for your website, and those styles will work with every browser currently being used. This, as every webmaster soon finds out when he/she uses CSS, is a pipe dream. The modern browsers all have uneven levels of implementation of the CSS standards. As though this isn't bad enough, their implementations are often buggy - and they don't share the same bugs! And when you have solved that tricky bit, you find that your site has certain visitors (often your best customers) who, for various reasons, are using older browsers that have only rudimentary support for CSS.

What most (if not all) CSS-using webmasters want is a way to specify that a certain style sheet is to be used by such and such a browser and not others, as well as to hide other style sheets from older browsers.

The Good and Bad News
The bad news is that there is no standard documented method to include or exclude style sheets from being used by every browser still being used on the Internet.

All is not lost however. The good news is that there are a number of tricks, workarounds and even non-standard but documented methods available that you can use to have your style sheet included by some browsers and not others. The workarounds often rely on known bugs in certain versions of specific browsers.

On the other hand, even with these workarounds and tricks, you will probably find that there are certain browsers that you want to code for but do not have any reliable means to detect and work around. However, at least with the help of the tips listed here, you should be able to design a CSS-based website that works with the most commonly used browsers

Preliminary Tips for Coding
Before you start coding your site using CSS for specific browsers, here are some tips that hopefully will make your life easier.

Design From Scratch
Most webmasters who have had to convert their existing website to CSS say that they find it easier to design their site from scratch in CSS than to try to find a way to reproduce their old layout in CSS.

Another reason for designing from scratch is that CSS allows you to do many things not possible using the old tables paradigm. Rethinking your entire design allows you to take advantage of the new possibilities.

Code to Follow the CSS Standards First
Many of the web designers hanging out in webmaster forums have found that it is far easier to develop their CSS code for a highly standards-compliant browser like Firefox first, and then only later add the workarounds to make their code work on IE, than to code for IE and then try to make it work for Opera, Konqueror, Safari and Firefox.

It is also logical to write for a more standards-compliant browser first: sooner or later, Microsoft is bound to issue a newer version of IE that will have the existing CSS bugs fixed. When they do so, all you have to do is to remove the workarounds which you created and you're done. If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs.

This is not to say that Firefox does not have its own share of CSS bugs. As such, my personal recommendation is to code with the two (supposedly) most standards-compliant browsers first, ie, Firefox and Opera, while at the same time periodically making sure that your CSS code validates with the W3 Consortium's free style sheet validator. You can add the workarounds for IE later.

(If you are not sure what validation means, or how you can get it done, check out my article on HTML and CSS Validation: Should You Validate Your Web Page? at http://www.thesitewizard.com/webdesign/htmlvalidation.shtml

Use External Style Sheets and Take Advantage of the "Cascading" Aspect of Cascading Style Sheets
One way to handle the bugs and omissions existing in different browsers is to put all your standards-compliant CSS code in a separate (external) style sheet file that is loaded by every browser.

Then, when you find th

in reference to: Google (view on Google Sidewiki)