Selecting different styles for different browsers

Applying different stylesheets according to different browsers is a job I hate to do. However, sometimes you need to get dirty.

The following code is not exactly a hack but a combination of rules applied to a website according to different browsers and according to different versions of Internet Explorer (yes, IE is always the problem).

So I had a stylesheet which applied well to Firefox, Opera and Internet Explorer 7, but not to IE6 or to previous versions. Let’s name it global.css.

Step #1

In order to hide the style from all versions of IE I imported like this:

<style type="text/css">@import "global.css" screen;</style>

The mediatype “screen” is the key which hides the style from IE browsers. However, the @import rule is not recognizable by all browsers, so pay attention how you use it.

Step #2

Now the style is applied to Firefox and Opera but not to IE. In order to move on I had to use some conditional comments. Here is an introduction to conditional comments and here is an article why conditional comments are good.

The following expressions are recognized by practically every browser:

<!--[if ! IE 7]><style type="text/css"> @import old.css </style><![endif]>

<!--[if IE 7]><style type="text/css"> @import global.css </style><![endif]>

Things are pretty simple here. The first line requires the old.css file to be loaded when the browser is not IE7, while the second one asks for the global.css in case that the visitor of the website uses IE7.

So now everything runs pretty smoothly and everyone is happy except for me who had to search for hours to find this solution. Hope you find it useful.