Level: Intermediate Elliotte Rusty Harold (elharo@metalab.unc.edu), Adjunct professor, Polytechnic University
22 Jul 2005 Insert multiple xml-stylesheet processing instructions into a document's prolog to provide different views for different users. This tip also shows you how to include pseudo-attributes to fine tune your presentations.
Separating content from presentation is a major goal of XML -- a goal it meets quite well. A single document isn't limited to a single stylesheet: One document can have many different stylesheets tuned for different readers and environments. This tip shows you how to include several xml-stylesheet processing instructions in an XML document's prolog that point to different stylesheets for use in different contexts.
The xml-stylesheet processing instruction
Most XML developers are fairly familiar with the xml-stylesheet processing instruction:
<?xml-stylesheet type="text/css" href="mystyles.css"?> |
When you put this instruction in the prolog of an XML document and load that document into a browser, the browser then loads the stylesheet from the relative URL mystyles.css and uses it to format the document for display. This functionality is supported by almost every modern Web browser except Lynx.
What's less well known is that you're not limited to one such stylesheet. You can include multiple xml-stylesheet processing instructions in the prolog. When more than one of these points to CSS, the rules in each stylesheet are combined. This behavior is useful for modularization. For instance, you can import one stylesheet that styles the document's mathematics and another that styles the document's text:
<?xml-stylesheet type="text/css" href="mathstyles.css"?>
<?xml-stylesheet type="text/css" href="textstyles.css"?> |
If any style rules in the two (or more) stylesheets conflict, then the last one that appears in the prolog takes precedence.
It's also possible to have xml-stylesheet processing instructions that point to different XSLT stylesheets or to both XSLT and CSS stylesheets. However, I don't recommend these options. Browsers are inconsistent and even unpredictable about which stylesheet they pick -- although more often than not the XSLT stylesheet is preferred.
The alternate pseudo-attribute
 |
Pseudo-attributes
These are all called pseudo-attributes because processing instructions aren't elements. Only elements have attributes.
|
|
For a little more predictability, you can use the alternate and/or media pseudo-attributes. The alternate pseudo-attribute can have the value yes or no: If the value is yes, then that processing instruction references an alternate stylesheet that loads only if the user asks for it; if the value is no, then the processing instruction references a primary stylesheet that loads by default.
For example, these two processing instructions specify a default presentation and an alternate presentation with big fonts:
<?xml-stylesheet type="text/css" href="regular.css"?>
<?xml-stylesheet type="text/css" href="bigfonts.css"
alternate="yes"?> |
When you do this, also include title pseudo-attributes to tell the user which is which. For example:
<?xml-stylesheet type="text/css" title="Regular fonts"
href="regular.css"?>
<?xml-stylesheet type="text/css" title="Extra large title fonts"
href="bigfonts.css" alternate="yes"?> |
The browser should allow the user to choose which stylesheet to use. In Mozilla and Firefox, you can find this option in the View > Page Style menu. Microsoft® Internet Explorer and Safari don't offer this choice. (They pick the default stylesheet.)
The media pseudo-attribute
The xml-stylesheet processing instruction can also have a media pseudo-attribute that identifies the environment in which to apply the stylesheet. For example, one stylesheet can format the document for on-screen display on a typical desktop or laptop monitor, another for printing on paper, and a third for projecting on a wall in front of an audience. The prolog of a document that provides all three options looks like this:
<xml version="1.0"?>
<?xml-stylesheet type="text/css" media="screen"
title="Regular fonts" href="regular.css"?>
<?xml-stylesheet type="text/css" media="projection"
title="Extra large fonts" href="bigfonts.css" alternate="yes"?>
<?xml-stylesheet type="text/css" media="print"
title="Smaller fonts" href="smallfonts.css" alternate="yes"?> |
In this case, the browser is supposed to choose the appropriate stylesheet automatically without further user intervention.
Eight values are defined for the media pseudo-attribute:
-
screen -- Typical, modern computer displays found on desktops and laptops
-
tty -- Fixed-width terminals like VT-100s and X-terms; suitable for Lynx
-
tv -- WebTV and the like
-
projection -- Projection on a large screen for an audience
-
handheld -- PDAs, cell phones, and similar small-screen devices
-
print -- Paper
-
braille -- Braille screen readers
-
aural -- Voice screen readers
The media pseudo-attribute can be a comma-separated list of possible values. For instance, this xml-stylesheet processing instruction identifies a stylesheet for both handheld devices and computers with larger bitmapped displays:
<xml-stylesheet type="text/css" media="handheld, screen"
href="styles.css"?> |
In addition, you can specify media="all" to indicate that a stylesheet is applied in all media. (This is the default if no media pseudo-attribute is present.) Of course, browsers might ignore style rules that don't make sense to them. A screen reader ignores font-size: 14pt even if it's part of a stylesheet with media="aural".
Finally, you can define new, custom values for this pseudo-attribute. For instance, you might use the value three-d to refer to a stylesheet for displays that use two nested LCD panels to present three-dimensional images. However, it's unlikely that any browsers will recognize this value. This functionality is mainly of interest to browser vendors that define custom values to recognize extensions they use; it's not of much use to individual Web developers.
Summary
One of the original goals of XML is to separate content from presentation. This allows you to apply multiple stylesheets to the same document to provide different views for different users. Adding multiple xml-stylesheet processing instructions to a document is one way to achieve this.
Resources
About the author | | | Elliotte Rusty Harold is originally from New Orleans, to which he returns periodically in search of a decent bowl of gumbo. However, he resides in the Prospect Heights neighborhood of Brooklyn with his wife Beth and cats Charm (named after the quark) and Marjorie (named after his mother-in-law). He's an adjunct professor of computer science at Polytechnic University, where he teaches Java technology and object-oriented programming. His Cafe au Lait Web site has become one of the most popular independent Java sites on the Internet, and his spin-off site, Cafe con Leche, has become one of the most popular XML sites. His books include
Effective XML
,
Processing XML with Java
,
Java Network Programming
, and
The XML 1.1 Bible
. He's currently working on the XOM API for processing XML and the Jaxen XPath engine.
|
Rate this page
| 
