On Display: XML Web Pages with Internet Explorer 5.xby Simon St. Laurent
May 02, 2000.
Overview
Microsoft's Internet Explorer browser for Windows and Macintosh renders XML content best using a technique very different from its Mozilla and Opera competitors: it relies on XSLT, and provides only a minimal level of Cascading Style Sheets (CSS) support for use with XML.
In general, Microsoft appears to be remaining far more dependent upon HTML for the presentation and linking tasks for which Mozilla and Opera use CSS and XLink. This leaves developers with a "support Microsoft, or support everyone else" problem. While there are ways around this, developers who want to support complex formatting in these two categories of browsers are going to have to write duplicate code, or possibly wait for the next generation of browsers.
(Of "historical" interest is this article from Tim Bray, reviewing the XML support in the original IE 5.0 for Windows, released in early 1999. Note that later versions of IE fix some of the bugs Tim mentions: pages formatted with XML+CSS now print, and you can use entity references within a document. CDATA sections also appear to work.)
Testing Code
In this review I tested Internet Explorer 5.0 for the Macintosh
(the only browser covered in this series, it should be noted,
that is actually shipping) and
Internet Explorer 5.5 for Windows (preview release).
The two IE browsers differ in the extent of their CSS support.
In general, IE 5.0 for the Macintosh provides more complete CSS support, though it is missing support for some of the
display property values that
simplify tasks like building tables from XML information.
To start, we'll look at the original display1.xml example from the first article, which tests support for the
display property's block, inline, hidden, list, and table values using a very simple style sheet.
Loaded into Mozilla M14, this document was rendered as shown in Figure 1. Figures 2 and 3 show this document as rendered by IE 5.0 for the Macintosh and IE 5.5 for Windows.
Figure 1: Loading the display test and its style sheet display1.css into Mozilla shows
what the document looks like when most values of the
display property are supported.
Figure 2: Loading the display test and its style sheet display1.css into Internet Explorer 5.0
for the Macintosh shows that this browser supports block, inline, none and list values for
the display property, but not tables. List numbering continues to be buggy, though in a
different way than in Opera.
Figure 3: Loading the display test and its style sheet display1.css into Internet Explorer 5.5
for Windows shows that this browser supports block, inline, and none values for the display
property, but not lists or tables. In general, this rendering looks identical to that
produced by Internet Explorer 5.01.
More Complex Tests
Loading some of the more sophisticated examples of table usage into IE 5.0 for the Mac and IE 5.5 for Windows produces a rather large mess on the screen, as shown in Figures 4-7.
Apart from the general mess created by the lack of table support,
these examples also demonstrate another set of tools Internet
Explorer doesn't yet support: XML Linking. Where Mozilla
supported an out-of-date draft and Opera provided support through
style sheets, Internet Explorer requires the use of the HTML
a element.
Building a Cross-Browser XML Page: Subset Approach
It's clear that the XML documents we constructed that worked in Mozilla and Opera won't work in Internet Explorer. So we'll explore the possibility of extending the code further so that it works in all three browsers at once.
One approach to building cross-browser applications when the browsers have wildly different feature sets is to confine yourself to the intersection of their features, the safest core possible. We'll start with the example created for Opera that also worked in Mozilla, and rework it so that it appears and works the same in both flavors of Internet Explorer as well.
This document is a similar list of books to the tables shown above, but will be presented as a list rather than a table. This way we only need support for block and inline display values, supported by all of the browsers we're testing.
In the document itself, we need to strip out the XLink attributes and replace them with explicit HTML
a elements. Remember that Internet
Explorer requires that the namespace prefix "
html" be used in order for HTML vocabulary to be recognized. This produces revised code that looks like this:
<?xml version="1.0"?> <?xml-stylesheet <html:h1>XML Books</html:h1> <book> <cover> <html:a <html:img </html:a> </cover> <author>Simon St.Laurent</author> <title> <html:a XML Elements of Style</html:a> </title> <pubyear>2000</pubyear> <publisher>McGraw-Hill</publisher> <isbn>0-07-212220-X</isbn> <price>$29.99</price> </book> <book> <cover> <html:a <html:img </html:a> </cover> <author>Elliotte Rusty Harold</author> <title> <html:aXML Bible</html:a> </title> <pubyear>1999</pubyear> <publisher>IDG Books</publisher> <isbn>0764532367</isbn> <price>$49.99</price> </book> ...
The style sheet can be radically simplified, since understood HTML behavior should handle the link formatting and processing.
catalog {display:block; } book {display:block; padding:5px; } book *{display:block;}
By appearances, this modified version should work fine in every browser, as shown below in Figures 8-11.
It all looks good, but there's one problem, seemingly unsolvable for
now: Internet Explorer 5.0 for the Macintosh displays the links
suggested by the
html:a elements, but they aren't in
fact traversable. The display behavior is supported, but the user
interactions are not.
The subset approach is clearly too limited to achieve useful results.
Building a Cross-Browser XML Page: Duplication of Effort
The other approach to building cross-browser documents is to create resources that allow each browser to do what it does best. In this case, this approach will mean creating XSL style sheets to support Internet Explorer, and CSS style sheets to support Mozilla and Opera. Building and maintaining such combinations requires extra time and effort from developers, and may remain a significant bar to XML Web development for the near future.
Making this work will mean taking advantage of the
xml-stylesheet processing instructions' ability to
appear multiple times in a document. The first style sheet we'll
offer to browsers will be a Microsoft XSL style sheet. The
second will be a CSS style sheet meant for use by Opera and Mozilla.
In the document itself, we just need to add a second line:
<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="book-table-ms.xsl"?> <?xml-stylesheet type="text/css" href="books1.css"?>
The XSLT style sheets we create for this presentation have to conform to the older Microsoft XSL processor that originally shipped with Internet Explorer 5.0 for Windows, as support for the final version of XSLT is still in a preview version of the MSXML parser that isn't yet built into these browsers.
<xsl:stylesheet xmlns: <xsl:template <html> <body> <table> >
While it's much longer than the three lines of code used in books2.css, it does offer more flexibility. For this example, though, the most important fact is that it lets us produce similar-looking results across all four browsers. The IE renditions are shown in Figures 12 and 13.
Figure 12: Loading the multi-stylesheet books catalog (books1multi.xml + book-table-ms.xsl)
into IE 5.5 for Windows produces a table.
Figure 13: Loading the multi-stylesheet books catalog (books1multi.xml + book-table-ms.xsl)
into IE 5.0 for the Macintosh produces a table.
We can use a similar approach to create links that work for the XML book catalog shown earlier. The Microsoft XSL style sheet looks like this:
<xsl:stylesheet xmlns: <xsl:template <html> <body> <h1>XML Books</h1> <xsl:for-each <p> <a> <xsl:attribute<xsl:value-of</xsl:attribute> <img> <xsl:attribute<xsl:value-of</xsl:attribute> </img> </a><br /> <xsl:value-of<br /> <a> <xsl:attribute<xsl:value-of</xsl:attribute> <xsl:value-of<br /> </a> <xsl:value-of<br /> <xsl:value-of<br /> <xsl:value-of<br /> <xsl:value-of<br /> </p> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
The results generated by this style sheet in IE 5.5 for Windows and in IE 5.0 for the Macintosh are shown below in Figures 14 and 15. (Netscape and Opera continue to use the CSS, producing the same results they did previously.)
Conclusion
While this multiple-stylesheet approach works for now, the version of XSLT that Microsoft is using may cause problems if and when Mozilla and Opera add XSLT support, and these problems may also be affected by the timing of Microsoft's XSLT upgrade to production versions of its browsers. Fortunately, Microsoft is offering a converter from its XSLT to the final version.
It's a lot more work to build multiple style sheets, making XML browsing much less tantalizing than it might otherwise be. Hopefully, before long the browser vendors will converge on some kind of compatible vision of XML document presentation.
For your convenience, we've created a table summarizing the XML browsing features of Internet Explorer and the other browsers reviewed in this series.