Create a ColdFusion stylesheet switcher

http://www.w3.org/TR/WCAG10/ quote "ensure that links that trigger scripts work when scripts are turned off or not supported".

Using ColdFusion to switch your stylesheets means the client's browser does not have to support JavaScript because it's run on the server. Of course the downside of using a server side language is that the webpage is submitted each time the visitor changes the stylesheet unlike in the JavaScript methods. On the upside, doing it server side could mean better compliance with the DDA (Disability Discrimination Act).

Below is a very simple method to switch styles using ColdFusion server side. I am sure this method can be expanded and by no means the only way in CF.

Just before the example, it's important to note that key creating any switcher method is to make sure you have created the foundations of your site first. Separation of content from presentation is critical for good accessibility and for this to work it is paramount.

The first thing you will need to do is to initialise a session I called 'style' if no session by that name had already been defined. The session stores the default stylesheet name in this example called 'standard.css'. The CFSCRIPT as you can see below is bested added to your Application.cfc OnSessionStart function. You don't need to lock this session scope as its in the OnSessionStart method (single threaded in terms of your session).

<!---

file Application.cfc

OnSessionStart - Fires when the session is first created.

--->

<cffunction name="OnSessionStart" access="public"
returntype="void" output="false">
<!---Style Sheet Switcher--->
<cfscript>session.style = "standard.css";</cfscript>
</cffunction>

The next thing you will need to do is add a link to the stylesheet that will switch the CSS file for the visitor. Normally you would have a static path to your stylesheet, but in this case you add the session name you created above instead of the file name. This now means when you run what you have so far the default stylesheet name 'standard.css' will be outputted. I recommend the code example below in contained in a include file so you can edit it global on your pages if needed.

<!--- include --->
<cfoutput><link
href="your-path-to-your-CSS/#session.style#" rel="stylesheet"
type="text/css" /></cfoutput>

Now you have in your webpage head a link to your stylesheet called standard.css, but what if you want to let your users change the default stylesheet from standard.css to something else? Well next add some links anywhere on your site you want them. These links pass in the URL scope the name of the new stylesheet you want them to apply. You will need to create the stylesheets first just like the standard.css one.

<ul>

<li><a
href="<cfoutput>#cgi.script_name#?newstyle=standard.css</cfoutput>"
title="change style sheet to normal">Default
CSS</a></li>

<li><a
href="<cfoutput>#cgi.script_name#?newstyle=printer_friendly.css</cfoutput>"
title="change style sheet to text only">Print/Text only
version</a></li>

</ul>

Nothing will happen when you click the links created above unless you do something with the variable we are passing URL.newstyle. This example using the OnRequestStart function in Application.cfc which runs at the beginning of each request to change the session.style to reflect the new style passed in the URL. In turn because this runs as the start of the request when the page has loaded the new stylesheet will be applied if needed.

<!---

Application.cfc

OnRequestStart() - Fires at first part of page processing.

--->

<cffunction name="OnRequestStart" access="public"
returntype="boolean" output="false">

<!--- Define arguments. --->
<cfargument name="TargetPage" type="string" required="true"/>
<!---Style Sheet Switcher--->
<cfparam name="newstyle" default="#session.style#">

<cflock scope="SESSION" type="EXCLUSIVE" timeout="15">

<cfscript>
            if (newstyle neq session.style){

            session.style = newstyle;

            }
</cfscript>

</cflock>
<!---End of Style Sheet Switcher--->
<cfreturn true />
<!--- Return out. --->
</cffunction>

The code examples above make use of the Application.cfc functions to set and change the stylesheets. However if you don't want to use Application.cfc or you are running an older version of CF you could try the following.

<cfif Not StructKeyExists(Session,"Style")>
<cflock scope="SESSION" type="EXCLUSIVE" timeout="15">
<cfset session.style="default_style.css">
</cflock>
</cfif>

<cfparam name="newstyle" default="session.style">
<cfif newstyle neq session.style>
<cflock scope="SESSION" type="EXCLUSIVE" timeout="15">
<cfset session.style=newstyle>
</cflock>
</cfif>

<cfoutput><link href="../#session.style#"
rel="stylesheet" type="text/css" /></cfoutput>

So why do this? Well, you are more likely to be compliant with accessibility standards using CF to switch styles than using JavaScript as you're not leaving it up to the visitor's browser to have JavaScript enabled.

One last thing to note is that it may be useful to have the 'no follow' tag on the stylesheet!

Hope this helps.