How to Change Your Look With Mozilla Skins
Pages: 1, 2, 3, 4, 5
Skins, CSS, and Interactions With Other Technologies
With the recommendation for acceptance of CSS Level 2 as a standard, style sheets have reached a point where they can be used quite effectively in interface design. In particular, the addition of absolute positioning, table layout, and special user interface properties to the host of features in CSS Level 1 gives the designer much more control over the layout of UI elements.
Beyond that, Mozilla technologies like XPCOM and XBL blur the lines between interface development and application development. It's not only the XUL interface itself that takes advantage of these technologies, but also the skin. When full CSS support and other web standards are coupled with some of these technologies, you get skins that can change content on the fly, add event handlers, and execute services in the application core.
Skins As Collections of Files
A skin consists of a group of CSS and image files located in a hierarchical structure (often a directory named skin) that has been registered with the Mozilla browser or another Gecko-based application. The CSS files are applied to the XUL interface by means of special import statements, processing instructions, and the special hierarchy, which are discussed in greater detail later. In this way, the global style information in the CSS files is applied to the application as a whole.
The most important single file in the skin -- the one that controls the color, font information, and style of the whole application -- is the global skin file, global.css. This file, sitting below the global/skin directory in Mozilla, is the basic source for the skin, though there are a number of other helper files, including platform-specific CSS, widget-specific skins, and images.
Cross-Platform UI
One of the most important features of skins is that they are created with cross-platform web standards instead of proprietary tool kits or languages. Not only does this make the resulting skin -- and indeed the user interface in general -- lightweight and easy to edit, it also makes it portable and nearly identical on different platforms.
This is an incredible boon for user interface developers, who are often forced to develop different user interfaces for different platforms, or else use the same UI and see it rendered differently. Using a standard like Cascading Style Sheets to style the UI frees developers from the native tool kits and allows them to truly write once and run anywhere. Also, the extensive use of CSS in web design creates an even shallower learning curve for new UI developers. XUL and CSS provide real UI development tools that are genuinely cross-platform and that anyone can use.
How XBL Provides Extensibility for Skins
Earlier, I alluded to some of the ways in which the skin is more than simply the look of the application. One important component of the extensibility of skins is XBL, the Extensible Bindings Language, in which much of the XUL widgets are described.
XBL is a companion language to XUL; where XUL is used to define the basic structure of the UI in terms of a set of UI widgets, XBL is used to:
- Define new content for a XUL widget
- Add additional event handlers to a XUL widget
- Define new interface properties and methods
- Create custom widgets
The XBL UI is referenced from the skin. The dynamic quality of CSS itself is what makes XBL dynamic, and what allows you to swap UIs at runtime. Using Mozilla's broad support for the DOM and JavaScript, developers can change the class of the UI elements, and in this way change the XBL content referenced there. In the following diagram, code snippets from the base XUL, the applicable CSS, and the referenced XBL are shown in their relation to one another: When the class of the XUL menu element is swapped, the contents of the menu are changed. The anonymous content defined in the XBL is only picked up by the XUL when the corresponding CSS class style statement is in effect.
 |
The relationship between XUL, CSS and XBL. |
This is only a small example of how the skin can extend the interface. Refer to Mozilla's XBL Reference document for more information about this extensibility.
