XCSS is a jQuery plugin that is used to generate CSS from a JavaScript object (via code, an external file, or using AJAX). This is the second post in a two-part series where I will go into more detail as to how the plugin is used and what kinds of things you can do with XCSS.
The Plugin
The XCSS plugin contains only a single function 'loadXCSS' that is used to process XCSS objects and loads the resulting stylesheet into the page.
The 'data' argument must either be an XCSS object, a string containing an XCSS object, or a string containing the URL to a file containing an XCSS object (note that loading from a URL is done asynchronously). The argument can also be an array containing one or more of the aforementioned types.
The 'callback' argument is optional and, if specified, must be a function. The callback function is executed upon successful completion after the XCSS object has been processed and a stylesheet created. Note that, if the 'data' argument is an array, the callback function is executed once for each item.
The XCSS Object
The XCSS object is a JavaScript object that contains all of the definitions and the structure of the stylesheet you would like to create. The following illustrates the basic structure of the XCSS object:
'variable': 'string' | number | function,
'selector': object | 'string' | function,
'property': 'string' | number | function
}
Variables
XCSS variables must begin with a dollar sign ($) and their values must be a string, a number, or a function that returns a string/number. Also, variables must be placed in the object higher or above where they are to be used.
'$borderColor': '#f0f0f0',
'$borderWidth': function() { return $.browser.msie ? 0: '1px'; }
}
Selectors
XCSS selectors may use any of the standard CSS2/3 selectors (with the exception of descendant selectors) and are applicable to the XCSS object they are contained within. Descendant selectors use the pseudo-combinator '>>' to indicate that you want to select the specified elements that are descendants of the current XCSS selector (note that in CSS this is indicated with whitespace and didn't translate well into XCSS).
'div':
{
'#tab': ... /* Generates div#tab { ... } */
'.tab': ... /* Generates div.tab { ... } */
'>> .tab' ... /* Generates div .tab { ... } */
'> .tab' ... /* Generates div > .tab { ... } */
'+ .tab': ... /* Generates div + .tab { ... } */
'~ .tab': ... /* Generates div ~ .tab { ... } */
}
}
Properties
XCSS properties may use any of the standard CSS2/3 properties (and any of the Mozilla- and WebKit-specific properties) and are applicable to the XCSS object they are contained within. Their values must be a string, a number, or a function that returns a string/number.
'.tab':
{
'$tabText': '#000000',
'$tabBack': '#fafafa',
'color': '$tabText',
'background': '$tabBack',
'border': function() { return $.browser.msie ? '0': '1px solid #808080'; }
}
}
Alternatively, if an XCSS selector does not contain any additional selectors or if its properties do not use any functions, you can use a much simpler shortcut like so:
'$tabText': '#000000',
'$tabBack': '#fafafa',
'.tab': 'color: $tabText; background: $tabText;'
}
Conclusion
I devised the XCSS plugin to be a quick-and-dirty method to add styles to a page without the need for an external stylesheet. Certainly this plugin isn't going to replace stylesheets, and I wouldn't recommend using this plugin as an alternative, but it does allow you to quickly add styles to a page for small things like other jQuery plugins and widgets.
I hope you find it useful.
Hi Kris,
thanks for your posting. I like the idea behind LESS and in my opinion it should get more love than it does currently. As you wrote, the plugin may be useful for other plugins or widgets – this way, you can seperate content and styling but save an extra HTTP request you’d have to make if an external stylesheet file was used.