How to set up a CSS switcher


I'm working on a website which 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" />
<!--[if lte IE 7]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie7.css" rel="stylesheet" />
<!--[if lte IE 6]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie6.css" rel="stylesheet" />


Take a look at They have a ashx handler that can read the conditional directives and emit the css for that browser.

By : Jafin

In 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:

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

And in the Code behind:

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

I would do the following:

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

This video can help you solving your question :)
By: admin