Print

XML Transformations with CSS and DOM

by Scott Andrew LePera and Apple Developer Connection
10/15/2002

As the adoption of XHTML continues to expand in Web development circles, the inevitable question arises: Can't we just skip over the browser-specific cruft of HTML and create our documents in pure XML?

XML in the browser has been the subject of many spirited discussions about bleeding-edge Web development. Some feel that XML in place of HTML isn't ready for prime time due to the lack of user agents that can properly parse and render it. Others feel that XML really belongs on the server or used solely as a descriptive framework for data and has no place in the visual world of the Web, which is already adequately served by HTML.

Despite this, the newest generation of browsers possess powerful XML capabilities. The recent releases of Mozilla offer a parser and a rendering engine that support XML technologies such as XML stylesheets, XML namespaces, XLink, SVG, and MathML. Along with its native support for SOAP and forthcoming implementations of WSDL and XSLT, Mozilla is poised to become a power player among XML client software.

Mozilla also permits XML to be rendered in the browser with CSS, and manipulated with the DOM. This is a real boon to those of us eager to experiment with XML transformations (both visual and structural) without having to delve into unfamiliar technologies such as XPath, the verbose traversal language of XSLT. If you're already familiar with CSS and DOM, you're more than halfway to achieving XML transformations in Mozilla.

Related Reading

Dynamic HTML: The Definitive Reference
A Comprehensive Resource for HTML, CSS, DOM & JavaScript
By Danny Goodman

This article demonstrates how to render XML in the browser with a minimum of CSS and JavaScript. The examples that follow were written for and tested with Mozilla 1.0 for Mac OS X and Windows 2000. This article is not a comprehensive tutorial on DOM, CSS, or XML, and a basic understanding of each of these technologies is required.

The Sample XML File

I chose a pared-down RSS file to provide the sample XML for this article. I could have chosen any arbitrary XML document, but RSS serves a particular purpose of syndicating content, often news and Weblog items, and is ideal for demonstrating basic transformations with CSS and DOM. Throughout this article, I'll show how to use CSS to apply formatting style to the RSS elements, and how to use the DOM Level 2 interface to traverse and transform the output. By the end of this article, I'll have created a (admittedly crude) browser-based RSS reader application using the RSS feed itself.

The first order of business is to format the existing XML elements with CSS. As with HTML, this is accomplished with a linked stylesheet.

Applying Style

An XML stylesheet is typically imported via an xml-stylesheet processing instruction in the prologue of the XML document. This is analogous to using the link tag in HTML to import CSS, and the syntax is similar:

<?xml version="1.0"?>
<?xml-stylesheet href="rss.css" type="text/css"?>

Unlike HTML, no assumptions are made about the formatting of XML elements on the part of the processor. A browser understands (either implicitly or otherwise) that an HTML <p> element is a block element, while an <em> is an inline container. Likewise, a browser can safely assume that boldface is the default formatting of text inside an HTML <strong> element. Not so with raw XML—by linking in a CSS document, the basic rules for visually formatting each element and its contents can be supplied to the processor.

I first have to decide which elements to format as block elements. Since all elements are displayed as inline by default, I only need specify the block elements in the stylesheet. I'll start out by defining the display, font, and box properties of the rss, channel, and item elements:

rss
{
    display:block;
    margin:10px;
}

channel
{
    display:block;
    height:300px;
    width:280px;
    border:1px solid #000;
    overflow:auto;
    background-color:#eee;
    font: 12px verdana;
}

item
{
    display: block;
    padding:10px;
    margin-bottom:10px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#fff;
}

At this point, I'm not really interested in some of the channel metadata elements, so I'll use display:none to remove them from the visual output. Note that this doesn't remove the elements from the document; if I wanted to do that, I'd use the appropriate DOM method and remove them programmatically. I'll get to that a bit later on. I want to keep the channel's title and description elements, though, so I'll toss them some CSS as well:

channel>title, channel>description
{
    display: block;
    margin-left:10px;
    margin-top:10px;
    background-color:#eee;
    font-weight:bold;
}

channel>title
{
    font-size:16px;
}

channel>description
{
    font-size:10px;
    margin-bottom:10px;
}

item>title
{
    font-weight:bold;
}

item>link, channel>link, channel>language
{
    display: none;
}

To check my formatting style, I fire up Mozilla 1.0 and point it at my RSS document. Here are the results so far:

XML with CSS Applied

As you can see, formatting XML with CSS is as simple as doing the same with HTML. But I have a problem: None of my links are actual links. That is, they don't behave as HTML links when you click on them. I need to find a way to transform the RSS link elements into working links. CSS is ill-suited for providing this kind of functionality, but I do have another tool at my disposal: DOM.

Pages: 1, 2

Next Pagearrow