Leveraging CSS, XSLT, and XSL-FO

You've already spent some time learning about the differences between CSS and XSL, but it's worth going through a more detailed comparison so that you have a solid understanding of your style sheet options. More importantly, I want to point out some of the issues for choosing one style sheet technology over the other, especially when working with documents in a web environment. The technologies are just similar enough that it can be difficult determining when to use which one. You may find that the best approach to styling XML documents is a hybrid approach involving both XSL and CSS.

There are several key differences between CSS, XSLT, and XSL-FO, which I've alluded to earlier in the tutorial:

  • CSS allows you to style HTML documents (XSLT cannot, and XSL-FO cannot unless the documents are valid XHTML documents)

  • XSL-FO allows you to style XML documents via an XML syntax (CSS and XSLT cannot), although web support is lacking

  • XSLT allows you to transform XML documents (CSS and XSL-FO cannot)

You're here to learn about XML, not HTML, so the first difference between CSS and XSLT/XSL-FO might not seem to matter much. However, when you consider the fact that many XML applications currently involve HTML documents to some degree, this may be an issue when assessing the appropriate style sheet technology for a given project. And more importantly, you have to consider the fact that XSL-FO has yet to garner browser support, which means that it isn't a viable option for formatting data to be displayed on the Web.

The third difference is critical in that CSS provides no direct means of transforming XML documents. You can use a scripting language with the DOM to transform XML documents, but that's another issue that requires considerable knowledge of XML scripting, which you gain in Part IV. Unlike scripting languages, CSS was explicitly designed for use by nonprogrammers, which explains why it is so easy to learn and use. CSS simply attaches style properties to elements in an XML/HTML document. The simplicity of CSS comes with limitations, some of which follow:

  • CSS cannot reuse document data

  • CSS cannot conditionally select document data (other than hiding specific types of elements)

  • CSS cannot calculate quantities or store values in variables

  • CSS cannot generate dynamic text, such as page numbers

These limitations of CSS are important because they are noticeably missing in XSLT. In other words, XSLT is capable of carrying out these tasks and therefore doesn't suffer from the same weaknesses. If you don't mind a steeper learning curve, the XSLT capabilities for searching and rearranging document content are far superior to both CSS and XSL-FO. Of course, XSLT doesn't directly support formatting styles in the way that CSS and XSL-FO do, so you may find that using XSLT by itself still falls short in some regards. This may lead you to consider pairing XSLT with CSS or XSL-FO for the ultimate flexibility in styling XML documents. Following are a couple of ways that XSLT and CSS/XSL-FO can be used together to provide a hybrid XML style sheet solution:

  1. Use XSLT to transform XML documents into HTML documents that are styled with CSS style sheets.

  2. Use XSLT to transform XML documents into XML documents that are styled with CSS or XSL-FO style sheets.

The first approach represents the most straightforward combination of XSLT and CSS because its results are in HTML form, which is more easily understood by web browsers. In fact, a web browser doesn't even know that XML is involved when using this approach; all that the browser sees is a regular HTML document that is the result of an XSLT transformation on the server. The second approach is interesting because it involves styling XML code directly in browsers. This means that it isn't necessary to first transform XML documents into HTML/XHTML documents; the only transformation that takes place in this case is the transformation from one XML document into another XML document that is better suited for presentation.

By the Way

The emphasis for now needs to be on styling XML documents for the Web using CSS as opposed to XSL-FO because CSS is much more widely supported in browsers. However, this may change as web developers continue to inject more XML into their web sites, which could lead browser vendors to eventually offer better support for XSL-FO.