Converting CSS Data To XPath Using ColdFusion

Posted March 16, 2009 at 9:41 AM by Ben Nadel

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.




Reader Comments

Brian Swartzfager
Mar 16, 2009 at 11:00 AM // reply »
26 Comments
284 Points

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!


Ben Nadel
Mar 16, 2009 at 12:26 PM // reply »
11,246 Comments
75,418 Points

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


Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:
Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Ben Nadel
May 24, 2013 at 11:21 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@WebManWalking, Ha ha, let's us never speak of justifying "##" notation again :P ... read »
WebManWalking
May 24, 2013 at 11:18 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Ben, Ah, so it was indeed how I vaguely remembered it to be: A direct assignment value = users.id[ i ] causes value to retain the sticky datatype of the query column. Although unnecessary in ... read »
Muhammadibn
May 24, 2013 at 9:11 AM
Preventing Links In Standalone iPhone Applications From Opening In Mobile Safari
@Brandon, Hi, No, I haven't been able to do that. I have just kept it as it is. ... read »
Brandon
May 23, 2013 at 9:52 PM
Preventing Links In Standalone iPhone Applications From Opening In Mobile Safari
@Muhmmadibn Did you figure out a solution to launching PDFs? I am running into the same issues myself. There is no way to close the PDF or go back once you launch it. Thanks in advance! ... read »
Dr Amadi
May 23, 2013 at 6:06 PM
The Girl Who Broke My Heart, And Made Me A Better Person
Good day,ladies and gentle men, my name is Dr AMADI the great spell caster in Africa, i have help so many people for different kind of problems,who say there is no solution to problems on earth, that ... read »
Ben Nadel
May 23, 2013 at 4:26 PM
ColdFusion QueryAppend( qOne, qTwo )
@Heather, Glad people are still getting value out of this! ... read »
Ben Nadel
May 23, 2013 at 3:49 PM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@WebManWalking, I meant the code at the bottom (not the video). I did try to experiment with an intermediary variable, like: value = users.id[ i ]; arrayContains( userIDs, value ); ... but t ... read »
WebManWalking
May 23, 2013 at 11:06 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Ben, Are you talking about As Number: YES As String: YES As Java: YES? If so, that's with 3 different ways of referencing the constant 1, not users.id[1]. Query object references(*) are what seem ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools