Comparing XSL and CSS
by Norman Walsh
January 19, 1999
XSL and Cascading Style Sheets (CSS) have similar goals, and it's useful
to compare them. XSL is more powerful than CSS in many ways, but it's also
more complex. XSL and CSS are not competitors. For some common applications
(like HTML+ documents that use mostly HTML but have a few extra non-HTML tags
thrown in), CSS will be the easiest solution. For others, the manipulative
power of XSL will be required.
Although very different, XSL and CSS have two things in common: Each provides
a mechanism for selecting elements and for specifying how the selected elements
are to be presented. CSS uses selectors and properties in this way:
selector { properties; }
XSL uses patterns and formatting objects:
<xsl:template pattern="pattern">
<formatting objects/>
</xsl:template>
Selectors and Patterns. CSS2 (which is considerably more complex than
CSS1 with respect to selectors) and XSL each provide a fairly rich set of
features for selecting elements. Table 1
compares a few CSS2 selectors and XSL patterns.
CSS2 Selector
XSL Pattern
Definition
title
title
Any title
doc > title
doc/title
A document title (title is a direct child of
doc)
doc title
chapter//title
A title that is any descendant of doc
em[role]
em[role]
An em element with a role attribute
em[role="bold"]
em[role="bold"]
An em element when role is "bold"
listitem:first-child
listitem[first-of-type()]
The first item of a list
n/a
listitem[last-of-type()]
The last item of a list
n/a
equation[child(title)]
An equation that has a title
corpauthor + author
n/a
An author preceded by a corpauthor
Table 1: Some equivalences between CSS2 selectors
and XSL patterns.
Much more complex XSL patterns are also possible. For example, this XSL pattern
selects an item, other than the first, of a bulleted list in an appendix:
appendix//list[type="bullet", child(title)]/listitem[not-first-of-type()]
Properties and Formatting Objects. CSS properties let you specify
a wide range of display characteristics for an element. These properties are
"decoration" on the source tree. However, in XSL, you must specify both the
result object and its properties.
For example, the following CSS fragment formats a quote as an indented block
with some font changes:
quote { display: block;
font-size: 90%;
margin-left: 0.5in;
margin-right: 0.5in; }
In XSL, the same formatting could be achieved with XSL formatting objects
using this template:
<xsl:template pattern="quote">
<fo:block font-size="90%"
indent-start="0.5in"
indent-end="0.5in">
<xsl:process-children/>
</fo:block>
</xsl:template>
The advantage of both constructing a new object and applying properties to
it can be seen when you consider the things that you can't do with CSS properties
alone:
- change the order of elements for display;
- process elements more than once;
- suppress elements in one place and present them in another;
- add generated text to the presentation (CSS2 introduced a simple form
of pre- and post-element generated text, but falls short of solving the
general problem).
Consider the task of presenting names in "Last, First" format. Given this
source element:
<author>
<firstname>Norman</firstname>
<surname>Walsh</surname>
</author>
You need the powerful capabilities of XSL to obtain the desired result:
<xsl:template pattern="author">
<xsl:sequence>
<xsl:process select="surname"/>
<xsl:text>, </xsl:text>
<xsl:process select="firstname"/>
</xsl:sequence>
</xsl:template>
With CSS, you can apply properties to the <filename> and
<surname> elements, but there is no way to reorder them.
XSL formatting objects are being developed in coordination with the Cascading
Style Sheets and Formatting Properties (CSS/FP) Working Group (www.w3.org/Style/Activity). The goal of this coordinated effort is to define a single
formatting model for both systems. Using these formatting objects, it will
be possible to write style sheets that can be rendered on many different devices
with reasonably comparable results.
At present, the Working Draft does little more than lay the groundwork for
future drafts. It describes a number of formatting objects and outlines their
formatting semantics. Most of the formatting objects draw their semantics
from a combination of the Document Style Semantics and Specification Language
(DSSSL, defined by ISO/IEC 10179:1996) and CSS formatting models. With considerable
effort and substantial success, a first attempt at harmonizing these two formatting
models has been completed. Over subsequent drafts, these semantics will be
harmonized further.
When XSL is complete, XSL formatting objects will provide a device-independent
representation for online and print publishing that will include support for
sophisticated features such as layout-driven formatting.
The following is a list of common formatting objects defined by the first
XSL Working Draft:
- page-sequence defines a sequence of pages. The formatting
of pages in a sequence is described by the pagemaster. Currently
only a simple-page-master is defined, sufficient for simple,
single-column Web or print publishing.
- queue gathers content for later insertion into an area or
set of areas.
- sequence is a general wrapper for inline or block content.
A sequence provides a wrapper on which shared, inherited properties
can be hung.
- block represents a block of text. Paragraphs, titles, and
figure captions are all examples of blocks.
- list defines a list. List elements contain
list-item elements which further contain a list-item-label
and a list-item-body.
- graphic holds an image or vector graphic.
- link defines a link. A link-end-locator defines
the target of a link.