What Place Has CSS in the XML World?

Is CSS a good style language to use with XML? Is CSS an alternative to XSLT? You have probably heard these questions before. You may have even asked them yourself. Debates about the virtues and value of various style sheet languages have tended to increase the confusion. In this article we'll explore the application of CSS to XML.

What is Rendered by CSS1 and CSS2?

Let's start with a question. Before reading the rest of the article, take a pen and paper and try to answer the following question: how can the XML fragment below be displayed using CSS1 and CSS2 respectively? Take your time, I'll wait.

<topic xlink:title="Technology headlines" xlink:type="extended">
 <item xlink:type="locator" 
   xlink:title="Jim Barksdale to Donate $100 Million to Literacy"
   xlink:href="http://dailynews.yahoo.com/h/nm/20000120/wr/barksdale_2.html"/>
 <item xlink:type="locator"
   xlink:title="CNET to Buy Comparison-Shopping Web Site Mysimon.com"
   xlink:href="http://dailynews.yahoo.com/h/nm/20000120/wr/mysimon_cnet_1.html"/>
</topic>

Now let's try with another construct. Don't cheat, try to do as much as you can!

<topic xlink:title="Technology headlines" xlink:type="extended">
<item xlink:type="locator" 
      xlink:title="Jim Barksdale to Donate $100 Million to Literacy"
      xlink:href="http://dailynews.yahoo.com/h/nm/20000120/wr/barksdale_2.html">
      Jim Barksdale to Donate $100 Million to Literacy</item>
<item xlink:type="locator" 
      xlink:title="CNET to Buy Comparison-Shopping Web Site Mysimon.com"
      xlink:href="http://dailynews.yahoo.com/h/nm/20000120/wr/mysimon_cnet_1.html"> 
      CNET to Buy Comparison-Shopping Web Site Mysimon.com
</item> 
</topic>

So, even if you tried your hardest, you couldn't render the former XML fragment with CSS1 (although you could the latter). Why is this? Because CSS1 can render element data content, but not attributes. Each <item> element of the first fragment does not contain any data content; it contains only attributes. The two <item> elements of the latter fragment have data content in addition to attributes. So, a CSS1 rule can only render the element's data content. The CSS1 Weltanschauung (world view) is simple: no data content, nothing to render.

However, CSS2 brings us a gem hitherto unknown: the content property. With this property, it is possible to render an attribute's value. So while a CSS1 rule can render only the element's data content, a CSS2 rule can render both element attributes and data content.

To render an element having only attributes, we have to (a) transform the element into a visual object and (b) tell the CSS engine which content is to be displayed by this visual object. For example, to display each <item> element, we create a CSS rule that matches each <item>. In the rule body we create a block visual object with a content property having a value equal to the xlink:title attribute's value.

item
{
  display: block;
  content: attr(xlink:title);
}

XSLT vs. CSS

If we compare a CSS style engine to an XSLT engine, we see that their processing models are different. A CSS engine is mainly driven by a cursor visiting each node of the XML document node hierarchy. When the cursor is positioned on an XML node, the CSS engine tries to match this node to a CSS rule. The matching is based on a selector expression. A rule's selector can match with any element or attribute node. However, neither CSS1 nor CSS2 can be used to modify the XML document structure. Therefore the rendered document is very dependent on the XML document structure.

In contrast, XSLT allows you to transform the XML document structure. For instance, the elements can be sorted, an element's data content can be transformed into other attributes, attributes can be transformed into data content, etc. Another major difference is that CSS allows you to associate only one visual object with each element or attribute node matched. On the other hand, XSLT allows you to associate a group of visual objects to any node.

Here's a table summarizing the differences between XSLT and CSS:

At the time of writing, no browsers support the full CSS recommendations in conjunction with XML. So in the absence of widespread XML+CSS rendering support, what is the importance of CSS in an XML developer's toolkit? The answer is as a complement to two languages used for rendering content that are implemented widely in browsers and plugins:

1. HTML (and its successor, XHTML)
2. SVG

CSS Tastes Great with (X)HTML and SVG

Most HTML and SVG elements represent visual objects. For instance, the <p> element conveys the semantic meaning of a paragraph, but also describes a visual object that a browser can display. HTML interpreters (i.e., browsers) process an HTML document using an implicit visual model, even if this model is not documented as a recommendation. For instance, the Mozilla, Internet Explorer, and Opera browsers will render an HTML document in a more or less identical way. You'll see minor differences, but the overall look and feel of the document will be the same. These browsers support a similar visual model, even if it is not explicitly documented.

Is this what we call tacit knowledge? In a certain sense, yes—knowledge management experts would say that the visual model specifications are not yet made explicit, and are still tacit knowledge resident in the head of the browser designers. Like Japanese craftsmen creating traditional swords, browser designers learned by watching the creation of a master!

CSS is used to modify the default implicit visual model by changing the visual objects' properties. In HTML, most elements are associated with a visual object. Their visual characteristics are encoded as a set of properties, which may be modified with CSS. Notice here that I didn't say that CSS modifies an HTML element's attributes but that it modifies the visual object properties associated with an HTML element.

In both SVG and HTML, CSS is used to change the default visual object property set. For instance, a <p> element is implicitly associated with a block visual object, which has some default property values. To modify the properties, we can either create a CSS rule matching <p> elements, or add a style attribute to a particular <p> element. The style attribute contains a CSS property set. By modifying the visual object properties with CSS, we modify the implicit object's visual characteristics. For instance, we may use CSS to change the color or font of the rendering of the <p>.

The SVG design team chose to use CSS to specify SVG elements' visual characteristics. For example, the figure below was created using an SVG document, listed underneath the graphic.

<?xml version="1.0"?>
<svg height="60" width="120">
  <g style="stroke:black; stroke-width:1; fill:blue">
    <path d="M 20 20 L 40 10 L 40 10 L 20 50 Z"/>
    <path style="fill:green" d="M 40 20 L60 20L 60 50 L 40 50 Z"/>
  </g>
</svg>

The <g> element is used to group SVG visual objects such as path objects, encoded as <path> elements. SVG fully uses the inheritance feature of CSS. The CSS <g> element's style attribute value yields the default property set which is applied to all contained elements. Thus, the first <path> element will inherit from the style applied to the group (the default color is set to blue). The second <path> element overloads the fill property by changing its value (the fill: blue property/value is replaced by the fill: green property/value).

Conclusion

CSS is not an endangered species in the XML world, but more a species living in symbiosis with HTML and SVG. CSS provides the mechanism to set the characteristics of visual objects and in doing so adds value to the rendering languages.

In conclusion, CSS is not competing with XSLT, but is rather complementing it. XSLT can be used to transform an XML document into a target language such as HTML, XHTML, or SVG. CSS provides the extra versatility by allowing us to modify the properties of the target language's visual objects. And in the case where the target language is pure XML, CSS allows us to define these visual characteristics from the ground up.

---