Screw standards – let’s add variable support to CSS right this minute


I promised a few days ago that I’d get my Padnug presentation code and slides up, so I’m making good on that promise tonight.

The code is for an ASP.NET custom handler that adds variable support to CSS. I love this thing. There are already solutions out there that add variable support, but they totally suck ass. IE and Netscape each have their own crappy implementations, but they require this really stupid JavaScript garbage (can you tell I’m not happy about it?). The great thing about this solution is that it allows you to add variables to CSS in a way that’s very CSSish.

For example, check this out, yo:

@define
{
    someVariableName: Red;
    anotherVariable: 7em;
}

p
{
    color: @someVariableName;
    font-size: @anotherVariable;
}

My handler will turn the “@” variables into literal values before spitting the stylesheet out. Caching is used so that we don’t have to engage the server in a lot of pointless churn.

Pretty nifty, eh? I think so, anyway. You might not care that much, but anybody who’s had to work on ridiculously long stylesheets with many repeat values ought to see the benefit in this. It’s sort of a niche solution, but I love it too much to keep it hidden away like the town freak.

It’s very commented, so you might find it interesting even if you didn’t go to my presentation. Included in the comments are links to tutorials on custom handlers and data caching (in case you’re a little rusty).

Now I’m going to hit the sack. Today was a great day – I’m really happy with the .NET Rocks show we did, but I’m bushed. I have every intention of using this weekend to recuperate.