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).

Check Site design in DIfferent Browsers using Browsershots

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:

<![if !(IE 6)]>
<style type=”text/css” media=”screen”>@import url( your CSS URL );</style>
<![endif]>
<!–[if IE 6]>
<style type=”text/css” media=”screen”>@import url( your CSS URL );</style>
<![endif]–>

Detect a minor version: Suppose you want to use a separate CSS for IE 5.3. First, get the exact version number and then use the following code:

<![if !(IE 5.3)]>
<style type=”text/css” media=”screen”>@import url( your CSS URL );</style>
<![endif]>

Load CSS for newer versions: In case you want to load a CSS file for all versions greater than 6, use the following code:

<![if  gte (IE 6)]>
<style type=”text/css” media=”screen”>@import url( your CSS URL );</style>
<![endif]>

The NOT operator: To load a CSS for all other browsers except IE, use the not operator as specified below:

<![if  !IE]>
<style type=”text/css” media=”screen”>@import url( your CSS URL );</style>
<![endif]>

Those were some (if not all) of the tricks I have learned designing the theme of this blog. Do let us know your favorite CSS tweak through a comment.

Don't miss the Free Book

101 websites for getting things done - an informative book which will make you more productive and efficient. Subscribe to get it for free.