How to set up a CSS switcher

Asked 2008-08-07T18:31:22.780

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]-->

Edit Report

2 Answers

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;
}

answered 2008-08-07T19:00:58.757

-2

I would do the following:

www.website.com/?stylesheet=new.css

Then in your ASP.NET code:

if (Request.Querystring["stylesheet"] != null) {
    Response.Cookies["stylesheet"].Value = Request.QueryString["stylesheet"];
    Response.Redirect(<Current Page>);
}

Then where you define your stylesheets:

if (Request.Cookies["stylesheet"] != null) {
    // New Stylesheet
} else {
    // Default
}

answered 2008-08-07T19:02:00.800

How to set up a CSS switcher

2 Answers

Your Answer