I was trying to think of some way to pull data from a database to determine certain style attribute/value pairs that I would use on any given page. Typically, I have a default.css and maybe more xxx.css that I will deploy, but I thought of actually having my stylesheet in a cfm file and then letting cf change the document type in the stylesheet.cfm page. This actually works great (using a cfm stylesheet), so I thought I would share. I will discuss two methods, but each method only varies by one line of code… nothing tricky at all.

I know that I could “get around” this by using coldfusion local variables in hidden html elements and then onLoad a javascript function that would read this variable and use dhtml to update styles… but it’s a work around and well, quite frankly, this is cooler and takes less time. Don’t get me wrong… I love javascript, but I’ve been resorting to tricking browser into doing what I want by mucking around in the DOM. I was just looking for another way to do it on the server-side and not the client-side. Now that I’m working on more external web apps, I need to consider that I cannot always control the client-side.

When you are working on an isolated application, especially in a corporate controlled environments it is easy to overlook all of the variables of web browsing. Different browsers, different Operating Systems, version control and compatibility issues smack you in the face when you look at a database and know that there are people in Italy, Canada, all over who are using the app and not just the people on the second floor or across the building. It’s not that quality isn’t important… you just have different priorities, because you know that your client side is controlled. I also like debugging though, so I don’t mind issues for me to solve… but for users, visiting a web site for the first time is like test driving a car; if things go run, they may choose to walk away and never (ever) give it another chance (and bitch about it on other websites or in their blog!! Ha!)

Ok, onto the example. There will be two files that you will need to adjust to have coldfusion server side stylesheet control: the file that you reference your .css document (just change the .css file to the .cfm file) and of course create or convert your stylesheet.cfm file (or whatever you choose to call it).

So, first, of course, you will need to make sure that you point to your new stylesheet.cfm file instead of your whatever.css file in your the <link> tag (because I KNOW that none of you still put your CSS code in the same document; you all follow xhtml standards and current basic web application engineering standards, RIGHT?!) So, like this:

<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />

Next, onto your actual stylesheet.cfm… you’ll need to add either a cfcontent or a cfheader tag to the top of that file to make sure that cf server knows to push the correct document type to the browser. To use cfcontent:

<cfcontent type=”text/css” />

I know, I know… that was too difficult wasn’t it? Kidding… onto the next method, cfheader, where you will need to add:

<<cfheader name=”content-type” value=”text/css” />>

Also, of course, below that you can use any coldfusion conditional logic to set and use any combination of attribute value pairs or named classes that you wish.

Until next time… remember, just because they said it’s kosher doesn’t mean you should have it for dinner… is there such thing as kosher meth… kosher crack? Does the little Orthodox Union brand their logo onto little, tiny crack rocks and those little mini zip lock baggies they use for dope?