Choosing Between CSS and XSL

[This is preliminary documentation and subject to change.]

There are two style sheet languages available for use with XML in Microsoft® Internet Explorer 5—CSS and XSL. An important point to consider in choosing a style sheet language for a particular document is whether the structure of the XML document is suitable for display. With CSS, the structure of the XML content must be virtually identical to the structure of the presentation. Since one of the goals of XML is a complete separation of content from display, many XML documents are difficult to display as you might wish using CSS.

The following sample document representing a restaurant review illustrates some of the tradeoffs to consider when choosing between CSS and XSL.

<?xml version='1.0'?>
<story>
  <restaurant>
    <name>Red Apple Inn</name>
    <address>
      <street>3100 Longview Lane</street>
      <city>Palabro</city>
      <state>Wyoming</state>
    </address>
    <phone>123-555-1212</phone>
  </restaurant>
  
  <review>
    <rating stars="4">****</rating>
    <date>December 29, 1998</date>
    <reviewer><person>Louis Framptenheimer</person></reviewer>
  </review>
  
  <body>
    <p><summary>The small town of <city>Palabro</city> seems like
    an unlikely place for a high-class culinary establishment, but
    the <self>Red Apple Inn's</self> Chef <person>Alex
    Choperoni</person> is earning a national reputation for innovative
    dishes.</summary>  And rightly so, if this reviewer's recent
    culinary experience is any example.</p>
  
    <p>Within striking distance from the ski slopes at <city>Jackson
    Hole</city>, the <self>Red Apple Inn</self> is a completely
    restored Victorian hotel, and offers a warm and elegant atmosphere and
    gracious service.  The upscale clientele includes regular
    appearances by movie stars <person>Drew Barrymore</person> and
    <person>Matthew Broderick</person>.  Reservations are a must, and
    during the ski season it is not uncommon for the dining room to
    be booked solid six weeks in advance.</p>
    
    <p>It is hard to go wrong with a menu this packed with interesting
    choices.  The crab cakes are especially fine with a thin crisp
    crust that opens with a gentle prod of a fork to reveal a light,
    moist, almost mousse-like interior with a rich nutty flavor.</p>
  
    <p>The <self>Red Apple Inn</self> boasts one of the finest wine
    cellars in the region.  None of the dishes we sampled were less than
    outstanding. Here are a few of the selections from the daily menu.</p>
  </body>
    
  <menu>
    <appetizer>
      <description>Crab cakes with a creamy dill sauce served with crispy
        herbed daikon fries</description>
      <price>$23</price>
    </appetizer>
    <entree>
      <description>Braised jumbo sea scallops on a tomato beurre
        blanc</description>
      <price>$39</price>
    </entree>
    <entree>
      <description>Free-range chicken breast stuffed with morels in a
        brandy/green-peppercorn sauce</description>
      <price>$31</price>
    </entree>
    <entree>
      <description>Tarragon roast pork loin on a bed of ginger apple slaw
        and caramelized onions</description>
      <price>$34</price>
    </entree>
  </menu>
  
</story>

The document is structured as four sections—data about the restaurant, information about this review, the text of the review, and an excerpt from the menu. When applying CSS to this document, the overall structure must be used for the display as well. For example, the four sections will be displayed in the order they appear in the document. If later on it became necessary that the reviewer's name should be displayed after the menu excerpts, the XML document itself would have to be modified, not just the style sheet. XSL transcends this limitation by allowing sophisticated transformations.

Often the simplicity of the CSS language is offset by additional complications in the design of the XML structure. For instance, in this sample document, the design of the <rating> element contains a compromise. Instead of just using a straight number, this element contains a string of "*" characters which can be easily displayed by CSS (as long as no half stars are awarded). The numerical value is kept as an attribute as well to support a more flexible and program-accessible representation. XSL style sheets can make use of the number to influence the display in a variety of ways.

In contrast to CSS, which "decorates" the XML tree with formatting properties, XSL transforms the XML tree into a new tree (the HTML), allowing extensive reordering, generated text, and calculations—all without modification to the XML source. The source can be maintained from the perspective of "pure content" and can simultaneously be delivered to different channels or target audiences by just switching style sheets.

Some of the extra features of the XSL version include:

Generated text labels for many of the data items, such as "Rating", "Appetizers", even such simple things as the comma in "Palabro, Wyoming".
More sophisticated layout using HTML tables.
Data items appearing more than once in the style sheet—the "Red Apple Inn" appears as the title of the page, as the headline, and in "Menu selections from the Red Apple Inn".
Access to information stored in attribute values—the "stars" attribute is used to generate a URL pointing to an image representing the number of stars.
Reordering of items—the reviewer's name appears after the writeup, even though it appears before it in the source document.
Dynamic display behaviors not easily possible through CSS or modifying of the source.