It is always desirable to produce the smallest amount of client-code at any given
time. That includes HTML, JavaScript and CSS files. The more client-code you produce,
the longer it takes to download and render the web page. Let’s see how easy it is
to reduce CSS files by 35 % at runtime, but first we have to set some rules for the
feature.
-
No changes to the original .css files must be made
-
Must work on all .css files without exception
-
No negative performance impact
-
Use both the client's and the server's cache
-
Update the cache when the .css files change
-
Simplest possible implementation
We are going to use a generic handler (.ashx) to reduce the .css files and serve them
to the browser. The handler has to do 2 things. It must reduce the files and add them
to the browsers cache. The method that reduces the file, removes all unnecessary whitespace
and comments. The more whitespace and comments you use, the more it will reduce the
file.
<%@ WebHandler Language="C#" Class="css" %>
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
using System.Web.Caching;
public class css : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string file
= context.Server.MapPath(context.Request.QueryString["path"]);
ReduceCSS(file,
context);
SetHeaders(file,
context);
}
/// <summary>
/// Removes
all unwanted text from the CSS file,
/// including
comments and whitespace.
/// </summary>
private void ReduceCSS(string file, HttpContext context)
{
FileInfo fi
= new FileInfo(file);
//
Make sure that it only accesses .css files
if (!fi.Extension.Equals(".css", StringComparison.OrdinalIgnoreCase))
{
throw new System.Security.SecurityException("No
access");
}
string body
= fi.OpenText().ReadToEnd();
body
= body.Replace(" ", String.Empty);
body
= body.Replace(Environment.NewLine, String.Empty);
body
= body.Replace("\t", string.Empty);
body
= body.Replace(" {", "{");
body
= body.Replace(" :", ":");
body
= body.Replace(": ", ":");
body
= body.Replace(", ", ",");
body
= body.Replace("; ", ";");
body
= body.Replace(";}", "}");
body
= Regex.Replace(body, @"/\*[^\*]*\*+([^/\*]*\*+)*/", "$1");
body
= Regex.Replace(body, @"(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,}(?= )|(?<=&ndsp;)\s{2,}(?=[<])", String.Empty);
context.Response.Write(body);
}
>
>
>
/// <summary>
/// This
will make the browser and server keep the output
/// in
its cache to eliminate negative performance impact.
/// </summary>
private void SetHeaders(string file, HttpContext context)
{
context.Response.ContentType
= "text/css";
//
Server-side caching
context.Response.AddFileDependency(file);
context.Response.Cache.VaryByParams["path"]
= true;
//
Client-side caching
context.Response.Cache.SetETagFromFileDependencies();
context.Response.Cache.SetLastModifiedFromFileDependencies();
}
>
>
>
public bool IsReusable
{
get
{
return false;
}
}
}
Implementation
Download the css.ashx file below and add it to the root of your website. Then change
the path to the stylesheet in the header of the web page to point to the css.ashx
with the original .css file name as parameter:
<link rel="stylesheet" type="text/css" href="css.ashx?path=common.css" />
<link rel="stylesheet" type="text/css" href="css.ashx?path=folder/menu.css" />
Download
css.zip (0,82 KB)
* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included
Subscribe