Sunday, June 7, 2009

A Little About XHTML

In the past few days I’ve been reading the specifications for xhtml 1.1 & 2.0, and html 4.01 & 5.0. I myself have been using xhtml 1.0 & 1.1 ever since I started web development about 4 years ago, and I thought that it was the standard format to build a web page. There was one little detail that I overlooked. While I was sending the proper xhtml doctype:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I was sending the page as text/html with the following meta tag:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Now while the doctype was right, the content-type wasn’t. The browser would still render the page as text/html because of the meta tag. The page should then be sent as application/xhtml+xml with the changed meta tag:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
But that’s not all, the web server (ie apache) would still need modification in order to send out the proper MIME Type:
application/xhtml+xml xhtml xht
That means also renaming the file with a .xhtml extension. So now that we have the proper file name, headers and doctype, how’s the browser support? Firefox, Safari, and other legacy web browser know how to parse the XML file. The only problem is that some browsers render the entire XML file, while validating for errors, and then display the page to the user, and if an error in the XML file was encountered the rendering would break displaying an error to the page. HTML display the page as it renders, also called incremental rendering. I don’t personally see anything wrong with non-incremental rendering, instead of having the page slowly unravel in front of the user, why not just wait until the whole thing is done loading, and as long as the code is valid xhtml, then there is no reason to fear errors getting thrown at the user.

Internet Explorer, on the other hand, doesn't understand application/xhtml+xml, there is a little hack though to allow it to do so. It's by adding the following line to the xhtml file:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Then create a file called copy.xsl with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<?xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<?xsl:output method="html" indent="yes" encoding="UTF-8" />

<?xsl:template match="/">
<?xsl:copy-of select="." />
<?/xsl:template>
<?/xsl:stylesheet>

What this XSLT file does is copy the root element and spits it back out as html. This will allow Internet Explorer, and other browsers to that matter, to parse the file as application/xhtml+xml, and then render it as text/html to the user.

0 comments: