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

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

Thanks, didn't think of this, but . NET wasn't playing nice with this: <link rel="stylesheet" href="/style.css<%= VersionQueryString %>" type="text/css" />

You should look into ASP_NET themes, that's exactly what they're used for. They also allow you to skin controls, which means give them a set of default attributes.

I would suggest storing the stylesheet selection in the session so you don't have to rely on the querystring key being present all the time. You can check the session in Page_Load and add the appropriate stylesheet reference. It sounds like this is a temporary/development situation, so go with whatever is easy and works.

if (!String.IsNullOrEmpty(Request.QueryString["css"]))
   Session.Add("CSS",Request.QueryString["css"]);

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
}

what do you do when the user navigates to another page? comes in from an outside link?

Wrapping lists into columns

I'm using ColdFusion to populate a template that includes HTML unordered lists ( <ul> s). Most of these aren't that long, but a few have ridiculously long lengths and could really stand to be in 2-3 columns. Is there an HTML, ColdFusion or perhaps JavaScript (I'm accepting jQuery solutions) way to do this easily? It's not worth some over-complicated heavyweight solution to save some scrolling. Is this jquery plugin of any use to you? Check out the Columnizer jQuery plugin. 13 Answers So I dug up this article from A List Apart CSS Swag: Multi-Column Lists. I ended up using the first solution, it's not the best but the others require either using complex HTML that can't be generated dynamically, or creating a lot of custom classes, which could be done but would require loads of in-line styling and possibly a huge page. Other solutions are still welcome though. It's sad that two years later there is still no clean…