CssHandler Wiki & Documentation Rss Feed

Updated Wiki: Home

TroyGoode — Tue, 04 May 2010 02:34:24 GMT

DEPRECATED

Deprecated in favor of ".less":

http://www.dotlesscss.com/

Updated Wiki: Home

TroyGoode — Tue, 04 May 2010 02:34:03 GMT

DEPRECATED

Deprecated in favor of .Less:

http://www.dotlesscss.com/

UPDATED WIKI: Home

TroyGoode — Fri, 16 Nov 2007 16:58:30 GMT

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).

UPDATED WIKI: Home

TroyGoode — Fri, 16 Nov 2007 16:38:26 GMT

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).

UPDATED WIKI: Home

TroyGoode — Fri, 16 Nov 2007 16:36:17 GMT

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.

Download

CssHandler 0.1
Created by Rory Blyth in March 2004 and uploaded to CodePlex by Gabe Moothart in October 2007.

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).

Download

UPDATED WIKI: Home

TroyGoode — Fri, 16 Nov 2007 16:28:14 GMT

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

CssHandler 1.0
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
Created by Rory Blyth in March 2004 and uploaded to CodePlex by Gabe Moothart in October 2007.

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).

UPDATED WIKI: Home

TroyGoode — Fri, 16 Nov 2007 16:27:34 GMT

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
Created by Rory Blyth in March 2004 and uploaded to CodePlex by Gabe Moothart in October 2007.

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).

UPDATED WIKI: Frequently Asked Questions

gmoothart — Wed, 07 Nov 2007 20:19:08 GMT

CSS is not loaded in the login page when using Forms Authentication in Asp.Net. After logging in it appears correctly.

This is because Asp.Net thinks that your css files require authenitication. To fix this simply place a web.config file in your css and/or App_Themes directory with these contents:

<?xml version="1.0"?>
<configuration>
    <system.web>
      <authorization>
          <allow users="*" />
	  </authorization>
    </system.web>
</configuration>

UPDATED WIKI: Home

gmoothart — Wed, 07 Nov 2007 20:08:50 GMT

Project Description
CssHandler is an HttpHandler that processes css files, allowing them to be dynamic. It adds variables, support for Asp.Net app-relative urls using the '~' character, etc.

Frequently Asked Questions

The original version of this project was created by Rory Blyth

UPDATED WIKI: Home

gmoothart — Fri, 12 Oct 2007 03:32:02 GMT

Project Description
CssHandler is an HttpHandler that processes css files, allowing them to be dynamic. It adds variables, support for Asp.Net app-relative urls using the '~' character, etc.

The original version of this project was created by Rory Blyth

UPDATED WIKI: Home

gmoothart — Fri, 12 Oct 2007 03:28:08 GMT

Project Description
CssHandler is an HttpHandler that processes css files. It adds variables to css, support for app-relative urls using the '~' character, etc. This project builds upon the CssHandler
by <a href="http://www.neopoleon.com/home/blogs/neo/archive/2004/03/06/8705.aspx">Rory Blyth</a>