in Search
Welcome to Neopoleon - Sign in | Join | Help
Navigation: Home | Forums | Galleries

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).

Enjoy, people. You can grab the file here.

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.

Published Saturday, March 06, 2004 7:25 AM by Rory

Filed Under:

Comments

 

milbertus said:

Now that's cool. I've often wanted something like this, since every time that I create a stylesheet that uses the same color umpteen times I just feel...dirty, for lack of a better word. It's just been so engrained into my head not to hardcode things, and here we have CSS, where it's actually required to do so.

Thanks for developing this, Rory. Now, I just need to get my hands on some ASP.NET hosting so that I can use it. ;)
March 6, 2004 12:03 PM
 

Phil Scott said:

I normally just use the CSS inheritance of attributes to accomplish this task actually, but it would be nice to be able to setup some color schemes.

And one thing I've wanted to do with a CSS parser is take standards compliant CSS and go through and apply all the different hacks required for it to work proper in IE (i.e. box model hacks and the such).
March 6, 2004 3:55 PM
 

Rory said:

Phil -

The main reason I chose to do it this way has to do with a fairly specific situation I dealt with two contracts ago.

We were pushing out web site after web site for clients. It was the same app each time with only a few superficial changes (colors/images/etc).

Once you've gone through and banged your head against the wall while trying to make changes to a three billion line stylesheet that someone else created, you start to go a little nuts.

This seemed like the best thing to do. Since each company had its own color scheme, but not much else, it made sense to go in and be able to just change a few lines at the top of the sheet rather than messing with literal values (how the stylesheet was set up) in the other ten bajillion lines below it.

That's why it's sort of a niche thing :)

But, I figure that the people who need something like this will be happy...

Also, it's easy to use. CSS is such a whacked thing - it's nice to have an easy way to do this. I guess this is my opinion of what's "easy."
March 6, 2004 5:01 PM
 

Rory said:

milbertus -

"It's just been so engrained into my head not to hardcode things, and here we have CSS, where it's actually required to do so."

Exactly. CSS has some of the qualities of the sort of thing that would make sense to coders, but it falls short and winds up hardly making any sense at all to anybody.

In my not terribly humble opinion (I'm biased here), variables are a good way to go.

"Now, I just need to get my hands on some ASP.NET hosting so that I can use it."

I'm glad you brought this up - unless your hosting service allows you to go in and make changes to IIS, you'll have a tough time using this. You have to use IIS to map the .css file extension to the ASP.NET ISAPI DLL, and that's going to be tough with a lot of hosting companies.

It'd be fine on your own box, though, or one at work :)
March 6, 2004 5:04 PM
 

Josh said:

Without trying it at all...

Would a browser still treat a stylesheet like a stylesheet, even if it had a different extension? If you put the name of the stylesheet in the <link> tag correctly, but the name had another extension, say .ashx, would it work? In other words, is the .CSS extension a hardcoded part of the specification?

I'm sure you see where I'm going with this. Instead of having to map the .CSS extension, you could get the same result by using one of the "pre-mapped" extensions.
March 6, 2004 5:25 PM
 

Rory said:

Josh -

"Would a browser still treat a stylesheet like a stylesheet, even if it had a different extension?"

In my (limited) testing, it would.

However, I like the idea of keeping everything as CSSish as possible - that's why I'm going through the effort of keeping the .css extension and providing a syntax for variable declaration that is very CSSish.

There are certainly other ways to do this - they just aren't as "clean."
March 6, 2004 5:54 PM
 

NJ John said:

Interesting idea, Josh. I took a few minutes to experiment with it.

I wrote an .aspx page that did nothing but Response.Write a style definition, like so:

<%@ Page language="c#" %>
<%
Response.Write("P{color: blue;font-family: Arial;}");
%>

...and then in my "calling" page added this:

<link rel="stylesheet" type="text/css" href="style.aspx">

It worked! I'd imagine you could extend this functionality to the code-behind if you want to do more with it.

Of course, I'm using IE 6 and I don't know that another browser won't choke on the non-CSS extension. So in that regard, Rory's solution is the safer bet if you have full access to IIS settings.
March 6, 2004 6:12 PM
 

Joe Grenier said:

NJ John,

" I'm using IE 6 and I don't know that another browser won't choke on the non-CSS extension."

It's actually the 'rel' attribute that determines how the linked file is applied to the html. I did a quick test with Navigator 7 and it worked fine with a non '.css' extension. This could certainly be helpful if you're stuck with virtual hosting.

Anyway, the comments are hilarious Rory, but you've got a ways to go if you want to match that NT/2000 code for, shall we say, "color". I only counted one "ass" and no four letter words at all ;)
March 6, 2004 8:35 PM
 

Rory said:

Joe -

"Anyway, the comments are hilarious Rory, but you've got a ways to go if you want to match that NT/2000 code for, shall we say, "color"."

Thanks, Joe :) I tried to make it interesting...

"I only counted one "ass" and no four letter words at all"

Yeah. I got lazy ::shrug::

I guy can only swear so much in one day (or call someone a "dickhead" on .Net Rocks so many times) before he just has to take a break...
March 6, 2004 9:21 PM
 

Joe Grenier said:

Rory,

"or call someone a 'dickhead' on .Net Rocks so many times"

I'm still a little giddy from that.
March 6, 2004 9:29 PM
 

Damien McGivern said:

I've been using css system similar to that which Josh talked about for about a year now. The main reason for doing this is that my hosting company won't let me associate .css with asp.net in IIS so I can't use custom handlers (which would be a much more efficent way of doing things). At first I too wasn't sure about different browser rendering the css properly so set the responces Content-Type to text/css. I haven't had any problems with it jet. My system actually takes a query which is the name of the css file so I only have the one .aspx file that does all the conversion i.e. http://site/css.aspx?css=skin1
March 7, 2004 1:58 AM
 

Dan F said:

You are a sex god Rory. And, if you're not, you damn well should be. I wanna go to work tomorrow and try this out!
March 7, 2004 8:16 AM
 

Rory said:

Dan F -

I am:

A) Really happy to hear from you (always am when you comment)

B) Really happy that you're happy about this thingy :)

Be sure to let me know how it goes/what you think...
March 7, 2004 8:27 AM
 

Marc said:

While in a thread regarding CSS, I thought I'd just pop in and say that your site looks utterly and completely fucked in Firefox/Firebird.

The navigation bar is below everything else, and as soon as I hover one comment-box in the comments, they all go blank. Just thought I'd let you know...
March 7, 2004 2:44 PM
 

Rory Becker said:

This really is 'Simple Genius'

very very simple idea

but took a genius to think of it.

Very useful, Thanks very much

Rory
March 8, 2004 12:40 PM
 

Grant Carpenter said:

For some reason, what I really find myself wanting to do is take this and make it pull the values out of some keyed context.items collecton so i can have request specific css.
March 26, 2004 1:48 PM
 

dev said:

You can use a .ASPX as mentioned above and change the content type to be text/css as someone had concerns of none IE6 browsers not being able to handle this approach. I find this to be easier than the approach this blog is about and just as, if not more, "clean"
May 13, 2004 3:07 PM
 

Rory said:

"dev" -

"You can use a .ASPX as mentioned above and change the content type to be text/css as someone had concerns of none IE6 browsers not being able to handle this approach. I find this to be easier than the approach this blog is about and just as, if not more, 'clean'"

I don't think it's nearly as clean to go with an ASPX. I'd much rather see a CSS file with a .css extension.

If I have a web designer, then I don't want him/her to have to deal with ASPX files, and they probably don't want to deal with them either.
May 13, 2004 4:22 PM
 

asdf said:

asdfasd
May 14, 2004 3:14 PM
 

Rodrigo Contreras K. said:

Hi.
Take a look at the following alternative to implement variables in CSS:

http://www.simov.cl/rc/blog/?page_id=115
March 13, 2006 1:58 PM
 

perropicante said:

If you can't change the extension mappings on your site's server, you can do this to refer to your dynamic css file

[filename].css.ashx

Then, in your web.config, you map *.css.ashx to your handler. I used something similar to GZip (with acceptance negotiation) CSS files and control client-side caching.

Also, the browsers don't really care about extensions. What's important to them is the content-type and encoding. So for CSS, as long as you set the content-type to "text/css" and the encoding to the encoding you'll serve the file in, you should be good.
July 14, 2006 3:52 PM
 

Madan Gopal said:

hay
       
               i m software developer and i need project for development in asp.net language, please tell what i do.please help me. please


send mail at            madangopal81@gmail.com
November 7, 2006 8:44 PM
 

majid said:

hi
can you build a simple project with C# and send that project wirh its code.
thank you
majid575@yahoo.com
May 22, 2007 1:11 PM
 

Saumin said:

Hi Rory.
I have a problem. I am using generic httphandler to manipulate css. In my webapp which is using forms authentication, i log in and handler fires and everyting is fine. but i hvae been told that i have to manipulate login page images and styles also. Somehow, the handler doesnt fire when i hit the login page. I am really stuck. Can you point me in right direction?

Thanks!
Saumin
June 2, 2007 8:48 PM
 

Creative Jar Blog said:

CSS server side pre processor
February 21, 2008 11:43 AM
 

Variablen in CSS: Werkzeuge und L??sungsans??tze | Dr. Web Magazin said:

PingBack from http://www.drweb.de/magazin/variablen-in-css-werkzeuge-und-losungsansatze/
June 8, 2009 11:13 PM
New Comments to this post are disabled

About Rory

I *own* this site, you loser.

This Blog

Post Calendar

<March 2004>
SuMoTuWeThFrSa
29123456
78910111213
14151617181920
21222324252627
28293031123
45678910

Post Categories

Feeds
Copyright Rory, 2008. All rights reserved.