How to set up a CSS switcher

I’m working on a website that will switch to a new style on a set date. The site’s built-in semantic HTML and CSS, so the change should just require a CSS reference change. I’m working with a designer who will need to be able to see how it’s looking, as well as a client who will need to be able to review content updates in the current look as well as design progress on the new look.

I’m planning to use a magic querystring value and/or a javascript link in the footer which writes out a cookie to select the new CSS page. We’re working in ASP.NET 3.5. Any recommendations?

I should mention that we’re using IE Conditional Comments for IE8, 7, and 6 support. I may create a function that does a replacement:

<link href="Style/<% GetCssRoot() %>.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if lte IE 7]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie7.css" rel="stylesheet" />
<![endif]-->
<!--[if lte IE 6]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie6.css" rel="stylesheet" />
<![endif]-->

Answer

In Asp.net 3.5, you should be able to set up the Link tag in the header as a server tag. Then in the codebehind you can set the href property for the link element, based on a cookie value, querystring, date, etc.

In your aspx file:

<head>
  <link id="linkStyles" rel="stylesheet" type="text/css" runat="server" />
</head>

And in the Code behind:

protected void Page_Load(object sender, EventArgs e) {
  string stylesheetAddress = // logic to determine stylesheet
  linkStyles.Href = stylesheetAddress;
}