Cheating
So far I've shown you one way to more or less alter your XML code to get it to display in one browser, and another way to keep your XML code but display it in an altered manner in another browser. It's a difficult choice!
Before I leave the topic of CSS styling and move on to "real" style languages, there's a trick that could come in handy if you have enough freedom in choosing the names of your elements. I call this technique cheating because it really is; it's exploiting a browser's weakness for HTML to make it believe that it's not seeing XML, but HTML.
There's no secret coding, nothing even very complicated-the trick is to exploit existing HTML element names. Let's face it, a list is a list is a list, no matter how you want to look at it. It might be a parts list or a price list, but by carefully thinking about what you call the elements and how you nest them (and don't forget you can also use attributes to add information about elements), it's quite possible to use HTML elements. Compare this:
<price.list> <item>shoe, black</item> <item>shoe, brown</item> </price.list>
with this:
<price.list> <ul> <li> shoe, black</item> <item>shoe, brown</item> </ul> </price.list>
Big deal? Well, not really. All I'm suggesting is that instead of wrapping XML code inside HTML code, you mix the two together. Any browser that understands HTML will automatically pick out, recognize, and render the HTML elements. All you have to worry about is the remaining XML elements.
Does this work? Well, no-not really, but then again it doesn't work any worse than "pure" XML, and sometimes it works a lot better. Take a look at an example of such a mix, shown in Listing 18.8.
|
|
Listing 18.8 A Hybrid XML File for Mozilla
|
1: <?xml version="1.0"?> 2: <?xml:stylesheet type="text/css2" href="samplexmlmoz1.css"?> 3: <page> 4: <maintitle>SAMPLE WEB PAGE</maintitle> 5: <p>Welcome to one of the world's first WWW Home pages 6: written entirely in XML. This web page has been 7: constructed using:</p> 8: <UL> 9: <LI>basic XML code (derived from HTML)</LI> 10: <LI>a CSS stylesheet to get the page to display in 11: Microsoft Internet Explorer</LI> 12: <LI>a separate CSS stylesheet to get the page to 13: display in Netscape Communicator</LI> 14: <LI>another CSS stylesheet to get the page to 15: display in Netscape Mozilla (a September 1998 build)</LI> 16: <LI>variations of the XML code embedded as 17: pseudo-HTML code inside a standard HTML web page</LI> 18: </UL> 19: <P>Explore to your heart's content.</P> 20: <warning>Note that all of this code is 21: experimental so don't be disappointed if something doesn't quite 22: work the way you think it should.</warning> 23: <UPDATE>This page last updated: 21 August 1998</UPDATE> 24: </page>
The code isn't radically different. You make major gains because in the CSS style sheets you only need to specify the format for the XML elements and those HTML elements for which the default layout is unacceptable. You can simply rely on the browser to properly render those HTML elements that look fine as they are.
|
So much for the code-show me the pictures! Figure 18.8 is the Mozilla hybrid file rendered in Mozilla. Judge for yourself, and compare the results with Figure 18.3 (pure XML in IE5) and Figure 18.7 (pure XML in Mozilla).
Figure 18.8 The hybrid XML file in Mozilla.
| When you compare the outputs, you can see that how faithfully you keep to pure XML when your main concern is display in a Web browser is largely determined by the power of the browser and your determination to get a nice looking display. |
I sometimes feel that a lot more could have been achieved using HTML without even having to go as far as XML. HTML (and certainly the latest version, 4) has features like DIV elements, element classes, and attributes that allow you to add almost as much descriptive information as XML can do with elements. Consider the pure (semantic) HTML variant of the XML file we have been working toward throughout this chapter, shown in Listing 18.9.
Listing 18.9 Semantic HTML Code
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="PAGE"> 9: <H1 CLASS="PageTitle">SAMPLE WEB PAGE</H1> 10: <P CLASS="first">Welcome to one of the world's first 11: WWW Home pages written entirely in XML. This web page has 12: been constructed using:</p> 13: <UL CLASS="list"> 14: <LI CLASS="item1">basic XML code (derived from HTML)</LI> 15: <LI CLASS="item2">a CSS stylesheet to get the page to display 16: in Microsoft Internet Explorer</LI> 17: <LI CLASS="item3">a separate CSS stylesheet to get the page to 18: display in Netscape Communicator</LI> 19: <LI CLASS="item4">another CSS stylesheet to get the page to 20: display in Netscape Mozilla (a September 1998 build)</LI> 21: <LI CLASS="last">variations of the XML code embedded as 22: pseudo-HTML 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 26: so don't be disappointed if something doesn't quite work the 27: way you think it should.</P> 28: <HR NOSHADE WIDTH="100%"> 29: <P CLASS="update">This page last updated: 21 August 1998</P> 30: </DIV> 31: </BODY> 32: </HTML>
OK, so it isn't really a fair comparison. If nothing else, the CSS style sheet to render this is going to be enormous and, of course, I'd be throwing away all the additional features of XML like linking, addressing, and validation. However, if all you want is semantic information, HTML can be almost as useful as XML.