Click here to Skip to main content
Click here to Skip to main content
Go to top

CSS Variables

, 17 Dec 2006
Rate this:
Please Sign up or sign in to vote.
Using HTTPHandlers to support dynamic CSS.

Introduction

Users want flexibility in the websites they visit; they want to define what content they see, and how it is shown. Website developers want to give them that ability, but need to balance it against maintainability. Using Cascading Style Sheets (CSS), the developer can specify certain base layouts, or themes, and allow the user to change these at runtime. However, creating separate files for all possibilities is just not reasonable. A better way would be to change certain CSS values at runtime based on settings specified by the user, yet CSS does not have variables that can be evaluated at runtime.

Solution

To get around the problem of not having variables in CSS, one must read the CSS file and replace the given values at runtime. The good news is that in ASP.NET, this is a relatively easy task.

body
{
   background-color:#BG_COLOR#
}

Generic HTTPHandler

Using Visual Studio 2005, you can easily add a Generic HTTPHandler.

Add New Item

This will create an ashx file and add it to your project. This file implements the IHTTPHandler interface, with its one and only method, ProcessRequest, and includes the WebHandler page directive.

<%@ WebHandler Language="C#" Class="Handler" %>

The .NET Framework treats these files as HTPPHandlers without the need to register them in the <httpHandlers> section of the web.config file.

<%@ WebHandler Language="C#" Class="CSSHandler" %>

The code-behind:

using System;
using System.Web;
using System.Configuration;

public class CSSHandler : IHttpHandler 
{
    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "text/css";
        
        // Get the file from the query stirng
        string File = context.Request.QueryString["file"];
        
        // Find the actual path
        string Path = context.Server.MapPath(File);
        
        //Limit to only css files
        if(System.IO.Path.GetExtension(Path) != ".css")
           context.Response.End();

        //Make sure file exists
        if(!System.IO.File.Exists(Path))
           context.Response.End();

        // Open the file, read the contents and replace the variables
        using( System.IO.StreamReader css = new System.IO.StreamReader(Path) )
        {
            string CSS = css.ReadToEnd();
            CSS = CSS.Replace("#BG_COLOR#", 
                      ConfigurationManager.AppSettings["BGColor"]);
            context.Response.Write(CSS);
        }
    }
    
    public bool IsReusable 
    {
        get { return false; }
    }
}

As we can see, the ProcessRequest method simply opens the file specified on the query string, reads it, and uses string replace to add the value for the variable that has been specified in the web.config file. Not much to it.

<link rel="Stylesheet" href="CSSHandler.ashx?file=default.css" />

<appSettings>
   <add key="BGColor" value="Red"/>
</appSettings>

Limitations

Using a generic webhandler has a disadvantage in that you must specify the style sheet to parse. This breaks down when using ASP.NET 2.0 Themes, however, because any stylesheet placed in the theme folder will automatically be linked, no need to manually add it to your web pages. Although you can manually add each one, it isn't a very maintainable model.

Better solution

A better solution is to create a custom HTTPHandler and add it to the httpHandlers section of the web.config file.

<httpHandlers>
    <add verb="*" path="*.css" 
       type="CustomHandler.CSSHandler, CustomHandler"/>
</httpHandlers>

The code:

public class CSSHandler : IHttpHandler 
{
#region IHttpHandler Members

    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(System.Web.HttpContext context)
    {
        // Get the physical path of the file being processed
        string File = context.Request.PhysicalPath;

        // Open the file, read the contents and replace the variables
        using(System.IO.StreamReader reader = new System.IO.StreamReader(File))
        {
            string CSS = reader.ReadToEnd();
            CSS = CSS.Replace("#BG_COLOR#", 
                      ConfigurationManager.AppSettings["BGColor"]);
            context.Response.Write(CSS);
        }
    }

    #endregion
}

The only difference from the previous example is that the CSS file to parse is obtained from the context.Request.PhysicalPath property. Since the handler is registered for CSS files, it will process any stylesheet file regardless of its location in the web project.

Conclusion

This article has hopefully shown a method that can be used to provide dynamic settings to an otherwise static file and give website users a more positive experience.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)

Share

About the Author


Comments and Discussions

 
GeneralRe: Not working in Firefox PinmvpMark Nischalke17-Feb-10 11:40 
GeneralMy vote of 2 PinmemberBooGhost29-Dec-09 9:13 
GeneralRe: My vote of 2 PinmvpMark Nischalke17-Feb-10 11:37 
Generalperformance Pinmemberliorgold31-Jul-07 22:25 
GeneralRe: performance PinmvpMark Nischalke1-Aug-07 1:43 
GeneralRe: performance PinmemberEvyatar Ben-Shitrit1-Aug-07 8:24 
Questionare there other versions?? Pinmembernilskyone18-Jun-07 23:13 
AnswerRe: are there other versions?? PinmvpMark Nischalke19-Jun-07 2:03 
GeneralRe: are there other versions?? Pinmembernilskyone9-Jul-07 14:37 
GeneralRe: are there other versions?? Pinmembermolebrain13-Jul-07 3:52 
Questionthis is working for localhost but not for online.. Pinmemberrakesh_csit24-May-07 18:54 
AnswerRe: this is working for localhost but not for online.. PinmvpMark Nischalke25-May-07 2:12 
QuestionNot working for me PinmemberSaumin24-May-07 12:05 
AnswerRe: Not working for me PinmvpMark Nischalke24-May-07 15:46 
GeneralRe: Not working for me PinmemberSaumin25-May-07 4:52 
GeneralRe: Not working for me PinmvpMark Nischalke25-May-07 5:03 
GeneralRe: Not working for me PinmemberSaumin29-May-07 5:23 
GeneralGreat Work Pinmemberdbeard10-May-07 8:10 
GeneralVariable Source PinmemberJoeReynolds1-Apr-07 6:56 
GeneralRe: Variable Source PinmvpMark Nischalke1-Apr-07 13:53 
GeneralLots of praise [modified] Pinmemberjokva14-Feb-07 6:58 
GeneralRe: Lots of praise PinmvpMark Nischalke14-Feb-07 8:03 
GeneralSecurity & Performance PinmemberEvyatar Ben-Shitrit18-Dec-06 19:54 
GeneralRe: Security & Performance PinmemberMark Nischalke19-Dec-06 2:10 
GeneralDangerous PinmemberThe .NET Junkie18-Dec-06 7:40 
GeneralRe: Dangerous PinmemberMark Nischalke18-Dec-06 7:51 
GeneralRe: Dangerous PinmemberThe .NET Junkie18-Dec-06 8:31 
GeneralRe: Dangerous PinmemberMark Nischalke18-Dec-06 8:56 
GeneralRe: Dangerous PinmemberBrian Lowe18-Dec-06 9:43 
GeneralRe: Dangerous PinmemberMark Nischalke18-Dec-06 10:59 
GeneralRe: Dangerous Pinmemberevolved19-Dec-06 5:29 
GeneralRe: Dangerous Pinmembertrooper08149-May-07 16:55 
Generalbetter solution Pinmemberselap18-Dec-06 6:27 
GeneralRe: better solution PinmemberMark Nischalke18-Dec-06 6:50 
GeneralRe: better solution Pinmemberselap20-Dec-06 5:47 
QuestionGood concept, but what about performance? PinmemberSteven Berkovitz17-Dec-06 8:28 
AnswerRe: Good concept, but what about performance? PinmemberMark Nischalke17-Dec-06 10:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 17 Dec 2006
Article Copyright 2006 by Not Active
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid