XML, CSS, and Internet Explorer
Microsoft is currently putting a lot of effort into XML (you will learn a bit more about what they have planned for us on Day 21, "Real World XML Applications"). However, Microsoft is committing itself to supporting Dynamic HTML as the basis of displayable code. This means that the support for XML in Internet Explorer 5 is somewhat limited. Although it does allow you to view XML code, Microsoft's policy is centered on dynamically converting XML elements into HTML elements (XML data source objects were described earlier on Day 12, "Viewing XML in Internet Explorer"). XML becomes little more than a glorified data transmission scheme, part of what Microsoft calls "islands of data."
Whatever Microsoft's plans with XML, it is still interesting to note that Internet Explorer version 5 (IE5, which is currently available as a preview from the Microsoft Web site, http://www.microsoft.com/msdownload/iebuild/) is currently the only Web browser with any real support for XML. (Netscape's Mozilla code has some support, as you will see later in this chapter, but this browser is only available as source code and compilation is no small task.) Unfortunately, IE5 supports XML in a pretty unconventional, non-standard way. No one can really blame Microsoft for this; when the standards aren't really standard, and when they keep changing, it's quite hard to conform.
Before we look at how to display XML code in IE5, let's have a look at the perfect end result of what we're trying to achieve. Figure 18.1 shows a simple Web page written in HTML and using a separate CSS style sheet to give the visual layout. The HTML code is shown in Listing 18.1 and the CSS code is shown in Listing 18.2.
|
Listing 18.1 The HTML Code for the Target Document
|
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <HTML> 3: <HEAD> 4: <LINK rel="stylesheet" href="SAMPLEXML.css"> 5: <TITLE>Sample XML Home Page</TITLE> 6: </HEAD> 7: <BODY> 8: <DIV CLASS="CHAPTER"> 9: <H1>SAMPLE WEB PAGE</H1> 10: <P>Welcome to one of the world's first WWW Home pages 11: written entirely in XML. This web page has been 12: constructed using:</p> 13: <UL> 14: <LI>basic XML code (derived from HTML)</LI> 15: <LI>a CSS stylesheet to get the page to display 16: in Microsoft Internet Explorer</LI> 17: <LI>a separate CSS stylesheet to get the page 18: to display in Netscape Communicator</LI> 19: <LI>another CSS stylesheet to get the page to display 20: in Netscape Mozilla (a September 1998 build)</LI> 21: <LI>variations of the XML code embedded as pseudo-HTML 22: code inside a standard HTML web page</LI> 23: </UL> 24: <P>Explore to your heart's content.</P> 25: <P CLASS="WARNING">Note that all of this code is experimental so don't be disappointed 26: if something doesn't quite work the way you think it should.</P> 27: <CENTER> 28: <ADDRESS> 29: <HR NOSHADE WIDTH="100%">This page last updated: 21 August 1998</ADDRESS> 30: </CENTER> 31: </DIV> 32: </BODY> 33: </HTML>
Figure 18.1 The styled HTML target document in IE5.
|
Listing 18.2 The HTML Code for the Target Document
1: BODY {
2: color: #000000;
3: }
4:
5: H1 {
6: font-family: Arial;
7: font-size: 18pt;
8: font-weight: bold;
9: color: #FF0000;
10: background-color: #C0C0C0;
11: text-align: center;
12: border-top: solid;
13: border-bottom: solid;
14: border-left: solid;
15: border-right: solid;
16: }
17:
18: A:LINK {
19: color: #0000FF;
20: }
21:
22: A:VISITED {
23: color: #990099;
24: }
25:
26: .WARNING {
27: font-style: italic;
28: font-size: 12pt;
29: font-weight: bold;
30: color: #FFFFFF;
31: background-color: #0000FF;
32: text-decoration: blink;
33: margin-top: 8pt;
34: margin-bottom: 8pt;
35: margin-left: 10pt;
36: margin-right: 10pt;
37: padding-top: 1%;
38: padding-bottom: 1%;
39: padding-left: 1%;
40: padding-right: 1%;
41: border-top: dashed #000000;
42: border-bottom: dashed #000000;
43: border-left: dashed #000000;
44: border-right: dashed #000000;
45: }
| Note that the CSS code shown in Listing 18.2 could have been made a lot shorter by combining some of the properties. Note also that I haven't bothered to declare the properties for a lot of the elements. I can safely leave the Web browser to apply its own default properties. As you will see shortly, once you switch over to XML you will have to explicitly specify properties for every element. |
The sample HTML code is nearly XML code. Because this is about the display mechanisms, let's not be too adventurous. To convert the HTML code into XML code, I will simply rename some of the elements. The document becomes a PAGE element, a UL becomes a LIST element, and so on. The end result is shown in Listing 18.3. (Note that I cheated a little by dropping the HR element. A horizontal rule could easily be added to the style for the element above or below where you want it to appear, but I didn't want to complicate the style sheet unnecessarily.)
|
Listing 18.3 The Target Document Rewritten as XML Code
|
1: <PAGE> 2: <TITLE>SAMPLE WEB PAGE</IE5:TITLE> 3: <PARA>Welcome to one of the world's first WWW Home pages 4: written entirely in XML. This web page has been 5: constructed using:</PARA> 6: <LIST> 7: <ITEM>basic XML code (derived from HTML)</ITEM> 8: <ITEM>a CSS stylesheet to get the page to display in 9: Microsoft Internet Explorer</ITEM> 10: <ITEM>a separate CSS stylesheet to get the page to display 11: in Netscape Communicator</ITEM> 12: <ITEM>another CSS stylesheet to get the page to display 13: in Netscape Mozilla (a September 1998 build)</ITEM> 14: <ITEM>variations of the XML code embedded as pseudo-HTML 15: code inside a standard HTML web page</ITEM> 16: </LIST> 17: <PARA>Explore to your heart's content.</PARA> 18: <WARNING>Note that all of this code is experimental so 19: don't be disappointed if something doesn't quite work the 20: way you think it should.</WARNING> 21: <UPDATE>This page last updated: 21 August 1998</UPDATE> 22: </PAGE>
When you display this code as it is, you will see something like the display shown in Figure 18.2. Internet Explorer will display a navigable rendering of the structure of the elements in the document.
| As you can see from Figure 18.2, the results could actually have been worse. While IE5 shows the markup, this raw content display gives you easy access to the structure of the information in the document. By clicking on the minus (-) and plus (+) symbols you can expand and collapse the element structures as you want. Obviously, there are no styles applied because no link was made to a style sheet and to have properly rendered XML elements you would have to provide an XSL style sheet. |
Figure 18.2 The raw XML document displayed in IE5.
As well as handling XML code, IE5 is of course hardwired to understand HTML. So, instead of going to all the effort of creating a full XSL style sheet, what we can do is create a CSS style sheet and attach it to the XML code. While IE5 doesn't know what to do with XML code, it does know that it exists. To mix the XML elements with the HMTL elements you need to declare a namespace and say that the XML elements belong to this namespace. The modified XML code, complete with the HTML wrapper, is shown in Listing 18.4.
|
Listing 18.4 The XML Document with a CSS Link
|
1: <?xml:stylesheet href="css.css" type="text/css"?> 2: <PAGE> 3: <TITLE>SAMPLE WEB PAGE</TITLE> 4: <html:IMG xmlns:html="htmluri" SRC="logo.gif" ALIGN="middle"/> 5: <PARA>Welcome to one of the world's first WWW Home 6: pages written entirely in XML. This web page has been 7: constructed using:</PARA> 8: <LIST> 9: <ITEM>basic XML code (derived from HTML)</ITEM> 10: <ITEM>a CSS stylesheet to get the page to display in 11: Microsoft Internet Explorer</ITEM> 12: <ITEM>a separate CSS stylesheet to get the page to 13: display in Netscape Communicator</ITEM> 14: <ITEM STYLE="color:green;>another CSS stylesheet to get the page to 15: display in Netscape Mozilla (a September 1998 build)</ITEM> 16: <ITEM>variations of the XML code embedded as 17: pseudo-HTML code inside a standard HTML web page</ITEM> 18: </LIST> 19: <PARA>Explore to your heart's content.</PARA> 20: <WARNING>Note that all of this code is experimental so 21: don't be disappointed if something doesn't quite work the way you 22: think it should.</WARNING> 23: <UPDATE>This page last updated: 21 August 1998</UPDATE> 24: </PAGE>
| In Listing 18.4, I reference the CSS style sheet using an XML processing instruction. If you look carefully you will see that my syntax is actually incorrect; according to the XML specification I should write xml-stylesheet, but Internet Explorer 5 doesn't complain about my use of xml-stylesheet (it doesn't mind if you use XML either). This is a little surprising because IE5 thoroughly checks all the other aspects of an XML file. |
I modified the XML code to add a reference to a graphic in line 4. This syntax is somewhat non-standard because the namespace I'm using (html) isn't declared anywhere. There is, however, no disputing the fact that it works.
|
The CSS style sheet is shown in Listing 18.5.
|
Listing 18.5 The CSS Style Sheet
|
1: PAGE {display: block; font-family:arial,sans-serif;}
2: TITLE { font-size: 24pt; font-weight: bold;}
3: PARA { display: block; padding-top: 6pt; }
4: LIST { display: block; list-style-type: lower-roman; padding-top: 6pt;}
5: ITEM { display: block; padding-top: 6pt;text-indent: 10pt;}
6: UPDATE { display: block; text-align: center; font-style: italic;
7: border-top: 2pt solid black; padding-top: 6pt; padding-bottom:
6pt; }
8: WARNING { display: block; margin-left:24pt; color: red; padding-top:
6pt; }
| Note that there should be a format specification for every element in the document you want to see. If you leave one out, or forget an element, it won't be displayed at all. |
You will also see (in the next to last line of Listing 18.5) that I added a border-top specification to the UPDATE element to compensate for having removed the HTML HR element.
Once the completed XML file, along with its CSS style sheet, has been loaded into IE5, the result looks something like Figure 18.3.
Figure 18.3 The XML document displayed in IE5, using CSS.
| The layout of this XML document can actually come close to the HTML layout shown in Figure 18.1 (I left out the border and shading for the title to keep the code simple). It isn't perfect, but it does come close. Unfortunately, this version of IE5 doesn't fully support CSS (yet) and so the browser doesn't interpret the display: list-item specification for the ITEM element. I am therefore unable to get the list items to be displayed using bullets. |
Of course, the modifications lock the XML and CSS code into this browser, and even lock them into this version of the browser, since IE5 behaves slightly differently. Load this code into the Netscape Communicator browser and you will see absolutely nothing. As seen in Figure 18.4, when you load the code into Mozilla you will see display results that are very similar to the IE5 display. Mozilla doesn't support some of the CSS properties yet and so the horizontal line near the bottom of the page isn't displayed.
Figure 18.4 The IE5 XML document displayed in Mozilla.
Despite the fact that we have now had to create XML code that drifts dangerously far from being acceptable, this is a reasonable way to render XML without writing any code to map it onto HTML elements (as described on Day 12). Once CSS is fully supported, this could be a feasible solution. Now let's look at the other side of the story: XML code in Mozilla.