CSS Agent is an ASP.NET handler that provides automatic vendor prefixes, CSS constants and minification to your style sheets

Automatic vendor prefixes

CSS Agent automatically adds vendor prefixes to CSS properties. Simply write using the W3C syntax and let CSS Agent do the rest for you.

CSS constants

CSS constants allow you to define and re-use values in your style sheets making development and on-going maintenance more manageable.

Minification

CSS Agent can automatically remove comments and white space from your style sheets reducing bandwidth usage and download times.

Futureproof

The CSS specification is continually evolving. Don't worry about updating your CSS when things change - just upload a new version of CSS Agent.

Automatic vendor prefixes

CSS Agent scans your style sheets looking for any CSS properties that match the W3C syntax and have a vendor specific implementation. These vendor prefixed variants are dynamically added to your style sheet before it is sent to the browser. Prefixed rules are stacked to ensure the W3C version is always defined last. If the syntax of a vendor specific implementation differs from the W3C syntax so much that a simple prefix isn't enough then CSS Agent will reformat the property (i.e. 'linear-gradient' in webkit)

h1 {
    color: blue;
    border-radius: 10px;
    transform: rotate(3deg) scale(1.2);
    background: linear-gradient(red, green, blue);
}

h1 {
    color: blue;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -o-transform: rotate(3deg) scale(1.2);
    -ms-transform: rotate(3deg) scale(1.2);
    -webkit-transform: rotate(3deg) scale(1.2);
    -moz-transform: rotate(3deg) scale(1.2);
    transform: rotate(3deg) scale(1.2);
    background: -o-linear-gradient(red, green, blue);
    background: -moz-linear-gradient(red, green, blue);
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%, red), color-stop(50%, green), color-stop(100%, blue));
    background: -webkit-linear-gradient(red, green, blue);
    background: linear-gradient(red, green, blue);
}

Supported Properties

• background-size
• background-clip
• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius
• border-image
• box-shadow
• box-sizing
• column-count
• column-gap
• column-width
• column-rule-color
• column-rule-style
• column-rule-width
• text-overflow
• transform
• transform-origin
• transition
• transition-property
• transition-delay
• transition-duration
• transition-timing-function
• linear-gradient

CSS constants

Constants allow you to define values that can be re-used multiple times through out your style sheet. Constants are declared in a custom @consts css block which is removed by CSS Agent prior to delivering the style sheet to the browser. Constant declerations follow the same syntax conventions as normal CSS rules except their names MUST be prefixed with a $ character and can only contain 'a-z' (upper or lower case), '0-9', '-' (hypen) and '_' (underscore).

@consts {
    $colour1: #cc0000;
    $image1: "images/test.jpg";
    $spacing: 10px;
}

h1 {
    background: $colour1 url($image1) no-repeat;
    padding: $spacing;
}

div {
    border: $spacing solid $colour1;
}

h1 {
    background: #cc0000 url("images/test.jpg") no-repeat;
    padding: 10px;
}

div {
    border: 10px solid #cc0000;
}

Minification

To use a minified version of your CSS, just add the '-min' suffix to the end of the filename (the part before the file extension) as shown below. Minifaction is performed on-demand and is cached so no additional physical copies of your CSS file will be created.

<link rel="stylesheet" href="screen-min.css">

How does it work?

Minification removes all non-essential characters from a style sheet without altering it's syntax. CSS Agent collapses all concurrent and non-essential whitespace, removes comments and units from zero values (i.e. 0px becomes 0) and removes the trailing ';' from the last style property. CSS Agent will preserve comments if they begin with a '!' character, which is useful for ensuring license and copyright statements do not get removed.

/*! License block */

/* this comment will be removed */

h1 {
    color: blue;
    border-radius: 10px;
    transform: rotate(3deg) scale(1.2);
    background: linear-gradient(red, green, blue);
}

/*! License block */
h1{color:blue;-moz-border-radius:10px;border-radius:10px;-o-transform:rotate(3deg) scale(1.2);-ms-transform:rotate(3deg) scale(1.2);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);background:-o-linear-gradient(red,green,blue);background:-moz-linear-gradient(red,green,blue);background:-webkit-gradient(linear,0 0,0 100%,color-stop(0%,red),color-stop(50%,green),color-stop(100%,blue));background:-webkit-linear-gradient(red,green,blue);background:linear-gradient(red,green,blue)}

Installing CSS Agent

IIS 7

Download and 'unzip' CSSAgent.zip. Copy CSSAgent.dll into your websites bin folder and register the handler by adding the indicated line to your web.config file — your done! Now, all files ending in .css will be routed to CSS Agent for processing. Note: If your using Cassini you may also need to add the handler in the Pre IIS7 example.

<configuration>
  <system.webServer>
    <handlers>
      <add name="CSS Agent" path="*.css" verb="GET" type="KeithClark.Web.CSSAgent" />
    </handlers>
  </system.webServer>
</configuration>

Pre IIS 7

Download and 'unzip' CSSAgent.zip. Copy CSSAgent.dll into your websites bin folder and register the handler by adding the indicated line to your 'web.config' file:

<configuration>
  <system.web>
    <httpHandlers>
      <add path="css.ashx" verb="GET" type="KeithClark.Web.CSSAgent" />
    </httpHandlers>
  </system.web>
</configuration>

Unlike IIS 7 installations, CSS Agent won't be able to automatically process your style sheets so you will need to call the handler manually. See below for an example:

<head>
  <link rel="stylesheet" href="/assets/css/css.ashx/screen.css">
</head>

Advanced settings

CSS Agent is pre-configured to provide the best possible browser compatability but you may wish to override it's default settings. To do this you will need to add a few lines to your 'web.config' file. The first registers the CSS Agent configuration section and the second contains the actual configuration settings:

<configuration>
  <configSections>
    <section name="cssAgent" type="KeithClark.Web.CSSAgentConfigurationSection" />
  </configSections>
  <cssAgent useSvgGradients="true" />
</configuration>

Currently, there is only one configuration option, to enable support for SVG gradients in Opera and IE9. This feature is disabled by default because of rendering problems in Opera 11.

FAQ's

Does CSS Agent process a CSS file each time it's requested?

No. The first time CSS Agent processes a style sheet it caches the output in memory. Subsequent requests for the same file will return the cached data. The cache will automatically expire when the style sheet is edited, triggering a rebuild.

Does CSS Agent set a HTTP cache expires header?

Yes. If you serve minified style sheets a far-future expires header is set.

Does CSS Agent have a public API?

Yes. (It's used to create the examples on this page) but it's not finalized yet so I haven't published the documentation for it. When it's ready for use, I'll post the details.

License

CSS Agent is free to use under the terms of the MIT license.