4.4.10. XCSS File Format

Cross-site Cascading Style Sheet (XCSS) files are the core of RichFaces component skinnability. XCSS is XML-formatted CSS that extends the skinning process. RichFaces parses the XCSS file containing all look and feel parameters of a particular component and compiles the information into a standard CSS file that can be recognized by a web browser.

The XCSS file contains CSS properties and skin parameter mappings. Mapping a CSS selector to a skin parameter can be done with < u:selector > and < u:style> XML tags, which define the mapping structure, as in the following example:

...
<u:selector name=".rich-component-name">
	<u:style name="background-color" skin="additionalBackgroundColor" />
	<u:style name="border-color" skin="tableBorderColor" />
	<u:style name="border-width" skin="tableBorderWidth" />
	<u:style name="border-style" value="solid" />
</u:selector>
...

During processing, this code will be parsed and assembled into a standard CSS format, like so:

...
.rich-component-name {
     background-color: additionalBackgroundColor; /*the value of the constant defined by your skin*/
     border-color: tableBorderColor; /*the value of the constant defined by your skin*/
     border-width: tableBorderWidth; /*the value of the constant defined by your skin*/
     border-style: solid;
}
...

The name attribute of <u:selector> defines the CSS selector, while the name attribute of the <u:style> tag defines the skin constant that is mapped to a CSS property. You can also use the value attribute of the <u:style> tag to assign a value to a CSS property.

CSS selectors with identical skin properties can be included in a comma-separated list:

...
<u:selector name=".rich-ordering-control-disabled, .rich-ordering-control-top, .rich-ordering-control-bottom, .rich-ordering-control-up, .rich-ordering-control-down">
	<u:style name="border-color" skin="tableBorderColor" />
</u:selector>
...