Skip to main content
Email Password   helpLost your password?

Introduction

User 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 Sheet (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 you 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" %>
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 using 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 style sheet placed in the theme folder will automatically be linked, no need 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>

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 uses a more positive experience.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralMy vote of 2 Pin
Arun Jacob		22:02 18 Sep '09  
Generalperformance Pin
liorgold		23:25 31 Jul '07  
GeneralRe: performance Pin
Mark Nischalke		2:43 1 Aug '07  
GeneralRe: performance Pin
Evyatar Ben-Shitrit		9:24 1 Aug '07  
Generalare there other versions?? Pin
nilskyone		0:13 19 Jun '07  
GeneralRe: are there other versions?? Pin
Mark Nischalke		3:03 19 Jun '07  
GeneralRe: are there other versions?? Pin
nilskyone		15:37 9 Jul '07  
GeneralRe: are there other versions?? Pin
molebrain		4:52 13 Jul '07  
Questionthis is working for localhost but not for online.. Pin
rakesh_csit		19:54 24 May '07  
AnswerRe: this is working for localhost but not for online.. Pin
Mark Nischalke		3:12 25 May '07  
QuestionNot working for me Pin
Saumin		13:05 24 May '07  
AnswerRe: Not working for me Pin
Mark Nischalke		16:46 24 May '07  
GeneralRe: Not working for me Pin
Saumin		5:52 25 May '07  
GeneralRe: Not working for me Pin
Mark Nischalke		6:03 25 May '07  
GeneralRe: Not working for me Pin
Saumin		6:23 29 May '07  
GeneralGreat Work Pin
dbeard		9:10 10 May '07  
GeneralVariable Source Pin
JoeReynolds		7:56 1 Apr '07  
GeneralRe: Variable Source Pin
Mark Nischalke		14:53 1 Apr '07  
GeneralLots of praise [modified] Pin
jokva		7:58 14 Feb '07  
GeneralRe: Lots of praise Pin
Mark Nischalke		9:03 14 Feb '07  
GeneralSecurity & Performance Pin
Evyatar Ben-Shitrit		20:54 18 Dec '06  
GeneralRe: Security & Performance Pin
Mark Nischalke		3:10 19 Dec '06  
GeneralDangerous Pin
The .NET Junkie		8:40 18 Dec '06  
GeneralRe: Dangerous Pin
Mark Nischalke		8:51 18 Dec '06  
GeneralRe: Dangerous Pin
The .NET Junkie		9:31 18 Dec '06  
Last Visit: 20:37 21 Nov '09     Last Update: 20:37 21 Nov '09 12 Next »


Last Updated 17 Dec 2006 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009