Cascading Style Sheets

CSS is the most familiar method for transforming XML documents for rendering on the Web. CSS styling for XML works much like it does for HTML. Just as traditional CSS applies specialized formatting to generic HTML, it can also apply limited formatting logic to XML so that it can be displayed in a browser. In this section we will go over when to use CSS and browser-compatibility issues.

When to Use CSS to Style XML

CSS cannot significantly alter pieces of an XML document or perform any conditional logic based on the data contained therein. This limitation restricts the use of CSS to transformations where the structure of the resulting HTML looks almost identical to the structure of the original XML document. The way to get around this is to assign formatting properties to each element within the tree. Elements and their children can be hidden or altered in appearance but cannot easily be otherwise rearranged or manipulated. Therefore, you should use CSS when you want to transform an XML document into a document similar in structure to your original. If all you need to do is apply formatting rules to the source XML document, CSS is most likely your tool of choice.

Consider the Listing 5-1 table of contents document shown earlier. Suppose we want to convert that listing into an indented display formatted for the printer. Because the output will be static and the <navitem> elements will be displayed in order, CSS looks like the logical formatting tool. To do this we will start by building a simple style sheet that will create block displays for the elements we want to show.

 navigation  { display: block; } navitem    { display: block; } description  { display: block; } href         { display: none; } openImage      { display: none; } closedImage  { display: none; } image    { display: none; } 

We can associate this style sheet to our XML document in Figure 5-1 by inserting the line <?xml-stylesheet type="text/css" href="navigation_simple.css"?> just before the <navigation> element. Figure 5-3 shows how this document will look if opened in Internet Explorer 5.5.

Figure 5-3 The same navigation XML source styled by using CSS.

This does not look attractive, but you can see what the CSS processor did to the document. It created block displays for the <navigation>, <navitem>, and <description> elements in place and omitted the <href>, <openImage>, <closedImage>, and <image> elements. Let's jazz it up by altering our style sheet slightly as in Listing 5-2.

This version of the CSS improves the readability of the <navigation> and <navitem> elements by adding font families, colors, sizes, and weights. More importantly, the new stylization rules include <padding> elements. This has the desired effect of incrementally indenting subelements by a fixed amount. The result of this transformation appears in Figure 5-4.

Listing 5-2 A CSS transformation that produces a better-looking result document.

 navigation {  font-family: verdana;  color: black;  font-size: 14;  font-weight: 800; padding: 1em; display: block;  } navitem {  font-family: verdana;  color: black;  font-size: 11;  font-weight: 400; padding: 1em; display: block; } description { display: block; } href  { display: none; } openImage { display: none; } closedImage { display: none; } image { display: none; } 

Figure 5-4 The CSS-styled navigation tree showing indentation of the branches.

How does the CSS processor know to indent items at the same depth in the tree by the same amount? It does so by recursively creating block display areas for each <navitem> element that contains similar block areas for each of that element's children. This process is best illustrated by adding a one-pixel border to the <navigation> and <navitem> elements in the style sheet, as shown in Figure 5-5.

When Not to Use CSS

CSS provides a familiar mechanism for preparing XML documents for rendering on a Web browser. Unfortunately, the capabilities of CSS are limited. Elements can only be transformed in place, meaning that they cannot be reordered. New tags, such as lists and images, cannot be dynamically inserted into the resulting document. The source XML document must be changed to include these tags to accommodate such extensions.

Figure 5-5 The CSS-styled navigation tree with borders to illustrate the padded block elements.

Another drawback to CSS is that it cannot perform logical operations such as "if-then" constructs. Furthermore, CSS is useful only for formatting. It cannot, for example, massage an XML document into another, similar XML document. Web developers must look elsewhere if their transformation requirements transcend simple formatting.

CSS Browser Compliance

One useful feature of CSS is that it is widely supported by popular browsers. Internet Explorer 5.0 and Netscape Navigator 6.0 both support client-side CSS styling of XML documents. Be aware, however, that the major browsers do not currently provide a complete implementation of CSS.