Dynamically selecting the stylesheet

June 21, 2007

On my web development computer I’ve got 5 (five!) browsers installed, for compability tests. I’ve got both IE7 and IE6, Opera, Firefox and Safari (only available in Beta for Windows so far). It’s amazing how most of the css-stuff can work on all browsers except for IE6, which is a bit annoying since it’s still the most popular web browser out there.

So what I usually do in ASP.NET is to dynamically select different stylesheets depending on which browser is requesting the page. It’s not as neat a solution as, say, putting it all in the same stylesheet and it’s magically working everywhere. But I have yet to see that…

How to do it? It’s easy, you can do it all inline in the <head>-tag if you like:

<% if(Request.Browser.Type.Equals("IE6")) { %>
<link rel="stylesheet" type="text/css" href="IE6.css" />
<% } else { %>
<link rel="stylesheet" type="text/css" href="AllOtherBrowsers.css" />
<% } %>

I usually only put the properties that differ between browsers in the above stylesheets. E.g. if you have a master stylesheet “Styles.css” it can contain:

.RoundedCornersBox
{
Margin-bottom: 10px;
Color: #FBFBFB;
/* Paddings are set in the browser specific stylesheets */
}

Then you can put, as the comment explains, the specific attributes in the other stylesheets:

[IE6.css]

.RoundedCornersBox
{
Padding-right: 16px;
}

[AllOtherBrowsers.css]

.RoundedCornersBox
{
Padding-right: 20px;
}

It’s the neatest solution I’ve seen so far, and the comment in the Styles.css points any future developers to where it is. Also if you’re using some debugging tool like FireBug, it’s usually not a problem at all finding out where a style property comes from in your page.

4 Responses to “Dynamically selecting the stylesheet”

  1. Martin S. Says:

    There is one much better way to do it:

    Inside , write this:

    Quite nice!

  2. Martin S. Says:

    Ok, this sucks. I’ll try again:

    <link rel=”stylesheet” type=”text/css” href=”main.css” media=”screen,projection” /&rt;

    <!–[if lt IE 7]&rt;
    <link rel=”stylesheet” type=”text/css” href=”pre-ie7.css” media=”screen,projection” /&rt;
    <![endif]–&rt;

  3. Martin S. Says:

    One final go:

    Inside <head>, write this:

    <link rel=”stylesheet” type=”text/css” href=”main.css” media=”screen,projection” />

    <!–[if lt IE 7]>
    <link rel=”stylesheet” type=”text/css” href=”pre-ie7.css” media=”screen,projection” /&rt;
    <![endif]–>

  4. microserf Says:

    Haha, strike three.

    Thanks for the tip and yeah, it’s a neat solution. My only objection is that it doesn’t work if you have javascript turned off, which approx. 6 % of the users do. If those users are important or not depends on what kind of site you’ve got.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: