Mike Spraggett | How To | Apply a different or additional Style Sheet Based on Browser

Apply a different or additional Style Sheet Based on Browser
14/12/2009

Why?

In a perfect world you would only have declare a style once for your site and it would work the same in all Web Browsers on All Operating Systems.

Sadly this is not a perfect world and there are differences in how a browser will render a page!!

For instance I have had an issue with the way that IE7 handles my links page in that it doesn’t deal well with space between sections due to a css class I have controlling the offset. I have corrected this by adding an additional "comment" in the head section of my master page that loads an additional Style Sheet that essentially overwrites a css Class that I applied in my main Style Sheet.

Alternatives

Again I am struggling with alternatives for this. If you are reading this then it is because you have a specific issue and me telling you to write better code is not going to be appreciated much!!
You could redirect to a browser complient page (Not a good idea unless you have mobile enabled site) or you could change your styles to something more accepted by all browsers?

How To

To conditionally load a Style Sheet based on Browser all you need to do is add the following (obviously with your style sheet href between the head tags of your page (masterpage if you are that way inclined).



You need to ensure that this is after any style sheets that you load every time as otherwise if you have the same class in more than one file it will only pay attention to the last one that was loaded.

You should end up with something a little like below.

<head>
     <link href="../Styles/Primary.css" rel="stylesheet" type="text/css" />
      
</head>

I think at this point it is worth mentioning that testing is the key to this. If you design a website using css only to discover at the end that browser css compliance issues are affecting you it is harder to find the offending element. At all stage of development I test against the 6 most frequently used Browsers. (IE7, IE8, Firefox, Opera, Safari and Chrome), and generally base my style on a more compliant browser such as Firefox and apply fixes based on browser after this. Please see my Links Section for the download locations of these browsers.

You can also load a Style Sheet based on the browser not being a certain type by adding a ! to the start of the browser name and enclosing it in brackets

<![if !(IE 7)]>
      <link href="../Styles/ie7Fixes.css" rel="stylesheet" type="text/css"/>
<![endif]-->

Or you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal).

Summary

This works on the basis of the cascading nature of style sheets, which is that you can load as many Style Sheets as you want but they will load in the sequence that they are declared in your page. If all the content in your style sheets are unique then all classes will only be loaded once. If however you have the same class across two or more Style Sheets it will only apply the last definition loaded.

Further Information

thesitewizard.com - How to Use Different CSS Style Sheets For Different Browsers