How to Load Separate CSS Files For Different Browsers

If you are planning to redesign your site using a new theme, one thing which takes a lot of effort is maintaining compatibility across all the major browsers. Different browsers react differently to a design because they follow different rendering rules.

You must ensure cross-compatibility of the theme so that it looks the same when viewed in major browsers. The technique that most of the designers use for maintaining browser compatibility is:

Load a generic CSS for all the browsers. This is the main CSS file which contain most of the coding.

Load browser specific CSS files to fix the bugs and make adjustments accordingly.

The idea is that a generic style.css file is loaded for all browsers which contains the main coding. And for error fixing, browser specific CSS files are called and loaded.

Preview the Design of your Site in Different Browsers

Before you decide to modify and optimize the design, you must check the design in different browsers. Instead of installing each and every browser (which is nearly impossible) – a simple solution is to use Browsershots, a web service for previewing your site in different browsers (includes Windows as well as Linux systems).

Browsershots will let you download screenshots of your website when viewed in the selected browsers. Once you spot the flaws in your CSS template, it’s time to fix theme using separate browser specific CSS files.

How to Achieve Browser compatibility using Different CSS Files

The most problematic browser is Internet Explorer 6 as its rendering engine reacts differently and in some cases it may completely disturb your site’s design. Following are short snippets of code which you can use to fix Internet explorer bugs and load different CSS file for Internet explorer:

Load a Separate stylesheet for IE6: You can load a common style.css for Firefox, Google Chrome, Opera and Safari and use a simple If-Else code to load separate CSS for Internet Explorer 6. Just use the following code: