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