Run code in CSS file in ASP.net - asp.net

Question

In my CSS file I would like to have definitions such as:
.hr {
background:url('<%=CommonFunctions.AllocateStaticPath("/images/hr.png") %>');
width: 100%;
height: 2px;
margin: 40px 0;
}
This would be useful to me, as the path to each image differs on the production server and the development server and the function correctly sets the resources path. Being able to do this would simplify my publishing process.
How can I enable IIS7 to run ASP.net on CSS files? I've tried renaming the CSS file to .ashx and creating a rewrite rule but this seems to always 404.

Answer 1

This question inspired me to do some testing to see if I could somehow get the asked for syntax to work.
It turned out to be relatively easy. After a few different test versions, this is what I ended up doing.
Configuration
Create a brand new web application to test in
Create a folder called DynCss where the css files that need dynamic processing will be put
Register .css files to be handled by the Page handler for requests to this folder. For this I added the following to web.config:
<configuration>
<system.web>
...
<httpHandlers>
<add type="System.Web.UI.PageHandlerFactory" path="/DynCss/*.css" verb="GET"/>
</httpHandlers>
...
</system.web>
</configuration>
Register a build handler for .css files:
<configuration>
<system.web>
...
<compilation debug="true" targetFramework="4.0">
<buildProviders>
<add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
</buildProviders>
</compilation>
...
</system.web>
</configuration>
After doing these changes, I can proceed to testing it.
Testing
For the purpose of testing I added DynamicStyles.css to the DynCss folder. Contents of DynamicStyles.css:
<%# Page Title="DynamicStyles.css" Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType="text/css";
Response.Cache.SetCacheability(HttpCacheability.Public);
}
</script>
body {
font-weight: <%= TestDynamicCss.Code.Constants.FontWeight %>;
}
Note: The TestDynamicCss.Code.Constants.FontWeight referrs to a static property on a static class. I simply returns the string "bold".
Finally, I link to it in Default.aspx:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="TestDynamicCss._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="/DynCss/DynamicStyles.css" rel="Stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET! Is this now bold? Why yes, it is!
</h2>
</asp:Content>
Comments
Using this approach you get the behaviour that you asked for. The drawbacks are that you don't get any automatic cache handling as you do for static css files. Also, this approach (as far as I can tell) makes it impossible to use the Css bundling features of Asp.Net 4.5. Also (needless to say) you don't get C# intellisense when coding in the Css file.

Answer 2

Try this:
background:url('<%= CommonFunctions.AllocateStaticPath("/images/hr.png") %>');

Answer 3

Can't you just create an ASPX page that returns CSS instead of HTML? Then reference the .aspx file in your CSS declaration.

Answer 4

I think you can use the ashx handler a page and add the response header:
Content-Type: text/css