Difference: XmlXslCssExperiment (1 vs. 2)

Revision 201 Jan 2004 - TobyCabot

Line: 1 to 1
	(TobyCabot - 12 Nov 2003) We found out from the XmlCssExperiment that we can't expect to send XML and CSS to browsers and get good cross-browser results. Mozilla does a pretty good job, but IE doesn't. There's another approach, though: send an XML document with a link to an XSL stylesheet. The stylesheet transforms the XML document into HTML which the browsers seem to be better at displaying than raw XML.
Line: 23 to 23

Deleted:
< <	<-- kludge for IE 5 and 5.5. IE6 and moz do this by default -->
	<-- The overall structure of a page -->

Revision 111 Nov 2003 - TobyCabot

Line: 1 to 1

Line: 1 to 1
Added:
> >	(TobyCabot - 12 Nov 2003) We found out from the XmlCssExperiment that we can't expect to send XML and CSS to browsers and get good cross-browser results. Mozilla does a pretty good job, but IE doesn't. There's another approach, though: send an XML document with a link to an XSL stylesheet. The stylesheet transforms the XML document into HTML which the browsers seem to be better at displaying than raw XML. Here's a document that includes a link to an XSL stylesheet: <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl" href="trivial.xsl" ?> <body> This is an XML document. It's well-formed but doesn't have a DTD so we can't say if it's valid or not. It also has a processing instruction that tells the browser how to find an XSL stylesheet with instructions how to transform the document into HTML. </body> The `xml-stylesheet` processing instruction tells the browser where to look for the stylesheet, which is a little more complex (since XSLT is pretty complex): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <!-- kludge for IE 5 and 5.5. IE6 and moz do this by default --> <xsl:template match="/"> <!-- The overall structure of a page --> <html> <head> <title>Sample XML/XSL Page</title> </head> <body> <xsl:value-of select="body" /> </body> </html> </xsl:template> <xsl:template match="hidden" /> </xsl:stylesheet> You can see the result here, it's pretty plain. We can spruce it up by adding a link to a CSS stylesheet, in this case using the same link that you'd use in a regular HTML page. ... <head> <title>Sample XML/XSL/CSS Page</title> <link rel="stylesheet" type="text/css" href="trivial.css"/> </head> ... You can see the result here.

Added:

>
>

(TobyCabot - 12 Nov 2003)

We found out from the XmlCssExperiment that we can't expect to send XML and CSS to browsers and get good cross-browser results. Mozilla does a pretty good job, but IE doesn't. There's another approach, though: send an XML document with a link to an XSL stylesheet. The stylesheet transforms the XML document into HTML which the browsers seem to be better at displaying than raw XML.

Here's a document that includes a link to an XSL stylesheet:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="trivial.xsl" ?>
<body>
 This is an XML document.  It's well-formed but doesn't have a DTD so
 we can't say if it's valid or not.  It also has a processing
 instruction that tells the browser how to find an XSL stylesheet with
 instructions how to transform the document into HTML.
</body>

The xml-stylesheet processing instruction tells the browser where to look for the stylesheet, which is a little more complex (since XSLT is pretty complex):

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <!-- kludge for IE 5 and 5.5.  IE6 and moz do this by default -->
 <xsl:template match="/">
 <!-- The overall structure of a page -->
  <html>
   <head>
    <title>Sample XML/XSL Page</title>

   </head>
   <body>
    <xsl:value-of select="body" />
   </body>
  </html>
 </xsl:template>

 <xsl:template match="hidden" />
</xsl:stylesheet>

You can see the result here, it's pretty plain. We can spruce it up by adding a link to a CSS stylesheet, in this case using the same link that you'd use in a regular HTML page.

...
<head>
 <title>Sample XML/XSL/CSS Page</title>
 <link rel="stylesheet" type="text/css" href="trivial.css"/>
</head>
...

You can see the result here.

View topic | History: r2 < r1 | More topic actions...