CssHandler

Project Description
CssHandler is an HttpHandler that processes CSS files, allowing them to be dynamic. It adds variables, support for app-relative urls using the '~' character, server-side processing of the @import directive, and whitespace compression.

Simple Example

Wondering how this works? Here is a quick walkthrough of configuring a new website to use the CssHandler:

Download the latest release assembly (CssHandler.dll) and place it in the /bin/ directory of your website. Then add the following to your web.config (in configuration -> system.web -> httpHandlers):
<add verb="GET" path="*.css" type="CssHandler.CssHandler, CssHandler"/>

If you have no web.config, create a web.config and make it look like this:
<?xml version="1.0"?>
<configuration>
   <system.web>
      <httpHandlers>
         <add verb="GET" path="*.css" type="CssHandler.CssHandler, CssHandler"/>
      </httpHandlers>
   </system.web>
</configuration>

If you do not have a StyleSheet yet, create one. For the sake of this example we will assume you have created a .css file named "theme.css" in a directory named "styles". Reference your stylesheet in your webpage by adding the following to the HTML -> HEAD element:
<link href="~/styles/theme.css" type="text/css" rel="StyleSheet" />

In your stylesheet file, let's create two variables and reference them:
@define{
   bgcolor_light: #99ccff;
   bgcolor_dark: #003366;
   fontcolor: #333333;
}
body{
   background-color: @bgcolor_light;
   color: @fontcolor;
}

Now say we want to have another stylesheet file and we want it to share the same variable definitions as our existing stylesheet. First, create your new stylesheet (we'll call it "forms.css") and add the following to it:
fieldset{
   background-color: @bgcolor_dark;
   color: #ffffff;
}

Finally, we have to reference this second file from the first file. In "theme.css" add the following line:
@import url(/styles/forms.css);

That's it! Now when you pull up the page both .css files will be served as a single css file to the browser. Most whitespace and all comments will have been removed and your @variable references will have been replaced with the declared values. Easy enough.

CssHandler 1.0 Download

New Release, November 2007 by Troy Goode

• Perform a server side include via the @import url(blah.css); declaration.
• Most whitespace is removed before being sent to client.
• Can now reference HttpHandler as an .axd file and pass the css file in as a querystring parameter (eg: CssHandler.axd?styles.css).
• The @define{...} block is no longer sent to the client.
• Fixed bug involving similiarly named variables.

CssHandler 0.1 Download

Created in March 2004 by Rory Blyth
Uploaded to CodePlex on October 2007 by Gabe Moothart

• Create CSS variables using the @define{ variableName: variableValue; } syntax.
• Reference CSS variables using the @variableName syntax.
• Comments are stripped before being sent to client.
• Application relative paths (ex: ~/Images/BG.gif) are resolved to full virtual paths (ex: /Project/Images/BG.gif).