2010

Using cfcontent to serve up Coldfusion generated CSS documents

Posted By : Shaun McCran
Related Categories: Coldfusion, CSS

The article deals with using cfcontent to serve up dynamic data driven CSS. I'll use Coldfusion to embed variables in a cfm file, then use cfcontent to have the browser serve the content as a CSS file.

Whilst building the latest version of a framework I wrote a routine using cfsavecontent to generate a CSS document that had embedded Coldfusion variables in it. This was an effective way to generate dynamic CSS although it has left me in a position where the CSS is fully visible in the source code.

To get around this I changed the code to this:

view plain print about

1<cfcontent type="text/css; charset=ISO-8859-1">
2<cfset variables.imglocation = "##00ffff">
3
4<cfoutput>
5/* CSS Document */
6
7* {margin:0px; padding:0px; border: 0px;}
8
9select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;}
10
11.borderless{border: 0px;}
12
13a {color: 000;}
14
15body{font-family:Arial, Helvetica, sans-serif; font-size:12px;
16background-image:url(#variables.imglocation#/images/bgrd.jpg); background-repeat:repeat-x; background-color: ##ffffff;}
17</cfoutput>

The CSS is generated and the variables are embedded. Then the page is then processed by CF, but since the cfcontent sets the page to be served with a text/css mime-type the browsers recognizes the page as css. This means you can call the stylesheet just like normal.

view plain print about

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

Comments (4) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs |

Answer Questions

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

This is a great way to integrate dynamic CSS / JS and ColdFusion. I've written a CFC module called ScriptWriter that uses this same method and, if you want, let's you take it a few steps further by minifying the content in the <cfsavecontent> and even writing it to an external file.

http://scriptwriter.riaforge.org/

# Posted By Matt Gersting | 11/05/10 19:05

Hi Matt,
Thanks for the comments, and for the link. I'll go check it out, it may well prove that I end out using that.

I was going to look at actually writing a css file with coldfusion variables in it, but hadn't got that far yet.

# Posted By Shaun McCran | 11/05/10 22:29

what is cfcontent?

# Posted By crusher | 14/05/10 08:13

Cfcontent is a tag that allows you to set (or reset) the MIME type for the current page. IE force the browser into thinking the page is something it isn't. In this case a style (CSS) sheet.

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef...

# Posted By Shaun McCran | 14/05/10 10:01

[Add Comment]

Shaun Mccran

Using cfcontent to serve up Coldfusion generated CSS documents