Views
CFSTYLESHEET
Contents |
Description
The CFSTYLESHEET tag helps you better, and more efficiently, manage your clientside CSS files. It performs a number of functions that reduces both load and bandwidth on your server and offer an overall faster experience to your users.
It can both join up multiple CSS files as well as running a highly optimized minimizer on the result Javascript.
It permits you to write your CSS as verbose as you wish, ensuring it is easy to maintain and read, but when it gets delivered to the client, the engine can optimize it for you.
Syntax
<cfstylesheet src="" minimize="">
Attributes
| Attribute | Req/Opt | Default | Description |
|---|---|---|---|
| src | required | Either a single path or a CFML array of paths's to different CSS files. All relative to the document root (you may also specify HREF as the src of your CSS | |
| minimize | optional | true | turn on or off the CSS minimizer engine |
| media | optional | all | control the media type of the resulting LINK tag |
| path | optional | stylesheets need to come from a given location to ensure all internal links operate correctly |
Notes
This tag allows you to minimize the number of calls made to your server for CSS resources. If you have say 5 CSS files you always load, then you can bring them altogether and reduce that hit to a single request. This tag will also aggressively cache on the browser the resulting CSS file so repeated full requests should not be made.
If any of the underlying CSS files change, or you change the optimizer, then CSS is rebuilt and the browsers will reload on their next call.
CFSTYLESHEET utilises the popular Yahoo! UI Library: YUI Compressor [1] for when the minimizer is turned on.
Usage
For example you may have:
<html> <head> <link rel="stylesheet" type="text/css" media="all" href="corestyle.css"/> <link rel="stylesheet" type="text/css" media="all" href="additional.css"/> </head> <body></body> </html>
this would result in 2 requests to the browser, resulting in approximately 160KB being downloaded.
alternatively you can replace it by, which reduces the request to 1, and only 59KB being downloaded.
<html> <head> <cfset cssFiles = ArrayNew(1)> <cfset ArrayAppend( cssFiles, "corestyle.css" )> <cfset ArrayAppend( cssFiles, "additional.css" )> <cfstylesheet src="#cssfiles#" minimize="true"> </head> <body></body> </html>
The CFSTYLESHEET will create a single <link rel="stylesheet"> block within the HTML page that the browser will then request.
Consider your stylesheet has image references to it and it needs to be relative
<html> <head> <link rel="stylesheet" type="text/css" media="all" href="/mypath/mycss/corestyle.css"/> </head> <body></body> </html>
then you can specify the PATH attribute that will instruct the browser to look for your CSS at the location specified to ensure you get the right relative paths.
<html> <head> <cfset cssFiles = ArrayNew(1)> <cfset ArrayAppend( cssFiles, "/mypath/mycss/corestyle.css" )> <cfstylesheet src="#cssfiles#" minimize="true" path="/mypath/mycss/"> </head> <body></body> </html>
See also
Engine
+ OpenBD 1.0.2
