Reformat your CSS on the fly

Have you ever, when developing a website, been frustrated when you get a different result when you deploy your application to http://site/ and http://site/app/ .

I don’t know about you, but it annoys the hell out of me. All that work in CSS and none of your images work when you run it in a different location. This would be especially frustrating when you are running multiple feature branches and need Kerberos interaction. The amount of work required to get Kerberos to work (SPN’s, URL’s, Delegation and AD) limits the number of sites you can have in an enterprise environment.

I have just two. I have a site for the latest candidate release and one to host all of my feature branches. As I am using TFS I identify my Feature with either a Requirement or Change Request Id and name everything after this.

Thus I have http://site/ and http://site-dev/1345 . This makes it easy to find and test, and my CI build at the ends of the day just overwrites the previous version.

This means that all of your css like this…

1.down {
2   padding-right:14px;
3   background: url('/UI/Resources/Images/arrow_down.gif') no-repeat 100% 50%;
4}

…will not work in one of your locations :( This makes me sad…

So, in order to cheer up your CSS, you can give it a little bit of .NET Omph…

The first thing you need to do is get .NET to handle ALL of your requests, and not just for the ASP.NET pages.

Add a “Wildcard application mapping” to the “aspnet_isapi.dll” and you are good to go…

To process the css we need an HttpHandler, this is dead easy to implement and action so:

 1Imports System.Web
 2Imports System.Text.RegularExpressions
 3
 4
 5Public Class CssHttpHandler
 6    Implements IHttpHandler
 7
 8    Public ReadOnly Property IsReusable() As Boolean Implements System.Web.IHttpHandler.IsReusable
 9        Get
10            Return False
11        End Get
12    End Property
13
14    Public Sub ProcessRequest(ByVal context As System.Web.HttpContext) Implements System.Web.IHttpHandler.ProcessRequest
15        context.Response.ContentType = "text/css"
16
17        'Get the file from the query stirng
18        Dim File As String = context.Request.FilePath
19
20        ' Find the actual path
21        Dim Path As String = context.Server.MapPath(File)
22
23        'Limit to only css files
24        If Not System.IO.Path.GetExtension(Path) = ".css" Then
25            context.Response.End()
26        End If
27
28        'Make sure file exists
29        If Not System.IO.File.Exists(Path) Then
30            context.Response.End()
31        End If
32
33
34        ' Open the file, read the contents and replace the variables
35        Using css As System.IO.StreamReader = New System.IO.StreamReader(Path)
36            Dim cssText As String = css.ReadToEnd()
37
38            ' Replace url's
39            Dim rximg As New Regex("url('*(.+?)'*)")
40            For Each m As Match In rximg.Matches(cssText)
41                cssText = cssText.Replace(m.Groups(1).Value, HandleRootOperator(m.Groups(1).Value))
42            Next
43
44            context.Response.Write("/* Please use the ~ operator in front of all URL's. e.g. url('~/UI/Resources/Images/Image.gif') will be converted at runtime to point at the root of the application. */" & vbCrLf & cssText)
45        End Using
46
47    End Sub
48
49    ' Methods
50    Public Function HandleRootOperator(ByVal virtualUrl As String) As String
51        If Not String.IsNullOrEmpty(virtualUrl) Then
52            If virtualUrl.StartsWith("^~/", StringComparison.OrdinalIgnoreCase) Then
53                Return ("^" & Me.applicationPath & virtualUrl.Substring(2))
54            End If
55            If virtualUrl.StartsWith("~/", StringComparison.OrdinalIgnoreCase) Then
56                Return (Me.applicationPath & virtualUrl.Substring(1))
57            End If
58        End If
59        Return virtualUrl
60    End Function
61
62
63
64
65    ' Fields
66    Private applicationPath As String = IIf((HttpRuntime.AppDomainAppVirtualPath.Length > 1), HttpRuntime.AppDomainAppVirtualPath, String.Empty)
67
68
69End Class

Now add the Handler to you web.config

1<httpHandlers>
2  <add verb="*" path="*.css" type="Company.System.Product.CssHttpHandler, Company.System.Product" />
3</httpHandlers>

And you are done :)

Technorati Tags: .NET Windows CodeProject

Our Happy Clients

We partner with businesses across diverse industries, including finance, insurance, healthcare, pharmaceuticals, technology, engineering, transportation, hospitality, entertainment, legal, government, and military sectors.