Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Converting CSS Data To XPath Using ColdFusion

By Ben Nadel on
Tags: ColdFusion

Now that we have our CSSElementSelectorToXPath() and CSSSelectorToXPath() ColdFusion user defined functions for converting CSS selectors into XPath queries, we can build on those to convert an actual chunk of style data into XPath selectors and flattened CSS rules. When you think about the consistency with which CSS is defined, you can see that the open/closed curly braces can be used as CSS list delimiters:

h1 { color: red } h2 { color: black }

If we split the CSS data on the closed curly braces, we get the following:

  1. h1 { color: red
  2. h2 { color: black

As you can see, when we use the closed curly brace as a list delimiter, it gives us each individual set of rules as a list item. And, once we have that, I think you can see that the open curly braces within each resulting item now separates the CSS selector from the CSS properties. In essence, CSS can be thought of a multi-delimiter list. And, once we see it this way, we can easily split it up and leverage our existing CSS user defined functions.

The following UDF, CSSToXPath(), does just that, building on top of our existing CSSSelectorToXPath() method:

  • <cffunction
  • name="CSSToXPath"
  • access="public"
  • returntype="array"
  • output="false"
  • hint="I convert CSS data to XPath-compatible data.">
  •  
  • <cfargument
  • name="CSS"
  • type="string"
  • required="true"
  • hint="I am the CSS data to converto XPath."
  • />
  •  
  • <!--- Define the local scope. --->
  • <cfset var LOCAL = {} />
  •  
  • <!--- Set up the default result set of search values. --->
  • <cfset LOCAL.Searches = [] />
  •  
  • <!---
  • First, we want to strip out any STYLE tags in case
  • this was sent to us within tags.
  • --->
  • <cfset LOCAL.CSSData = REReplace(
  • ARGUMENTS.CSS,
  • "</?style[^>]*>",
  • "",
  • "all"
  • ) />
  •  
  • <!--- Now, let's strip out all CSS comments. --->
  • <cfset LOCAL.CSSData = REReplace(
  • LOCAL.CSSData,
  • "/\*[\s\S]*?\*/",
  • "",
  • "all"
  • ) />
  •  
  • <!---
  • Now that we have stripped out tags and comments and we
  • are dealing with raw CSS, let's break the data up into
  • individual sets of rules. To do this, we will split the
  • CSS on the end bracket.
  • --->
  • <cfset LOCAL.CSSRules = ListToArray(
  • Trim( LOCAL.CSSData ),
  • "}"
  • ) />
  •  
  •  
  • <!---
  • Now that we have our data split up into groups of rules
  • by selector, let's go through each one and try to convert
  • the CSS selector into XPath and to clean up the CSS.
  • --->
  • <cfloop
  • index="LOCAL.CSSRule"
  • array="#LOCAL.CSSRules#">
  •  
  • <!--- Split the CSS selector from the CSS data. --->
  • <cfset LOCAL.CSSSelector = Trim(
  • ListFirst( LOCAL.CSSRule, "{" )
  • ) />
  •  
  • <!--- Get the CSS properties. --->
  • <cfset LOCAL.CSSProperties = Trim(
  • REReplace(
  • ListLast( LOCAL.CSSRule, "{" ),
  • "\s+",
  • " ",
  • "all"
  • )
  • ) />
  •  
  • <!--- Create the search object. --->
  • <cfset LOCAL.Search = {
  • Selector = LOCAL.CSSSelector,
  • CSS = LOCAL.CSSProperties,
  • XPath = CSSSelectorToXPath( LOCAL.CSSSelector )
  • } />
  •  
  • <!--- Add to the results. --->
  • <cfset ArrayAppend(
  • LOCAL.Searches,
  • LOCAL.Search
  • ) />
  •  
  • </cfloop>
  •  
  •  
  • <!--- Return the searches. --->
  • <cfreturn LOCAL.Searches />
  • </cffunction>

First, we strip out any STYLE tags and any CSS comments to make sure that we are working with pure CSS data. Then, we split up the CSS data and parse it into XPath queries and flattened CSS properties.

To test this ColdFusion user defined function, let's create some CSS data and the parse it into XPath queries:

  • <!--- Store CSS data. --->
  • <cfsavecontent variable="strCSS">
  •  
  • <style type="text/css">
  •  
  • /* This is the CSS * for our email. */
  •  
  • * {
  • font-family: verdana, arial ;
  • font-size: 12px ;
  • line-height: 17px ;
  • margin: 0px 0px 0px 0px ;
  • padding: 0px 0px 0px 0px ;
  • }
  •  
  • h1,
  • h2,
  • h3,
  • p,
  • table {
  • margin-bottom: 16px ;
  • }
  •  
  • h1 {
  • font-size: 16px ;
  • }
  •  
  • h2 {
  • border-bottom: 2px solid #E0E0E0 ;
  • margin-bottom: 12px ;
  • margin-top: 23px ;
  • padding-bottom: 4px ;
  • }
  •  
  • h3 {
  • margin-bottom: 12px ;
  • }
  •  
  • td.field-label {
  • font-weight: bold ;
  • padding: 0px 10px 5px 0px ;
  • text-align: right ;
  • }
  •  
  • td.field-value {
  • padding: 0px 0px 5px 0px ;
  • }
  •  
  •  
  • /* CSS for our invoice list. */
  •  
  • td#order-items {
  • border: 1px solid #666666 ;
  • width: 100% ;
  • }
  •  
  • table#order-items th {
  • background-color: #E0E0E0 ;
  • border-bottom: 1px solid #999999 ;
  • padding: 3px 5px 3px 5px ;
  • text-align: left ;
  • }
  •  
  • table#order-items td {
  • padding: 3px 5px 3px 5px ;
  • }
  •  
  • div#footer {
  • border-top: 2px solid #E0E0E0 ;
  • padding-top: 7px ;
  • }
  •  
  • div#footer p {
  • color: #666666 ;
  • font-size: 10px ;
  • line-height: 14px ;
  • }
  •  
  • </style>
  •  
  • </cfsavecontent>
  •  
  •  
  • <!--- Convert the CSS data to XPath queries. --->
  • <cfset arrCSSRules = CSSToXPath( strCSS ) />
  •  
  • <!--- Output the CSS as XPath. --->
  • <cfdump
  • var="#arrCSSRules#"
  • label="CSS As XPath"
  • />

When we run the above code, we get the following output:

 
 
 
 
 
 
CSS Converted To XPath Queries And Flattened CSS Properties. 
 
 
 

As you can see, each CSS selector (both simple and compound) were successfully converted into XPath queries. Using this set of ColdFusion user defined functions, we can now easily merge CSS and XHTML compliant data into one, flattened set of information.

Tweet This Great article by @BenNadel - Converting CSS Data To XPath Using ColdFusion Thanks my man — you rock the party that rocks the body!



Reader Comments

Ah, I was wondering if your next move was going to be figuring out a way of feeding a standard block of CSS into your XHTML style system. Didn't occur to me that you could treat the CSS as a series of list elements delimited by the closing curly bracket: nice work!

Reply to this Comment

@Brian,

Thanks man. Now that we have a collection of style and XPath queries, it should be a piece of cake to iterate over the list, find the target nodes, and append the style.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.