So I was just reading up on the upcoming HTML5 standard and am generally very pleased with the work they’ve done. But a though occurred to me, since HTML5 is effectivly going “version-less“, web designers are going to have to use javascript in order to detect features client side and either inject elements into the DOM when they are there, or inject some fallback code if they are not. There has been a lot of nice work on this front, specifically modernizr is a very cool library for this. But maybe there is a cleaner, better way.
First let me be clear, that why I am about to suggest is not currently valid HTML, it is what I think HTML5 should be, not what it is. So please don’t get upset if you try this and it doesn’t work.
So I want my idea to be simple and not require javascript. Using javascript to detect features is nice and all, but I don’t want to depend on this. I would like to be able to just write my html, and have it gracefully fallback if the feature is not there. This sounds complicated, but I believe that it isn’t.
A simple rule could be introduced to aid in this effort. While I’m sure there are corner cases that I am not considering, I think something like this would be good enough for:
If a unknown tag is encountered, treat it as a <div>. If the unknown tag is self closing, then treat as if it had a closing. When treating an unknown tag as a <div>, ignore attributes not applicable to a <div>. If a tag introduced in HTML5 is encountered and understood, then simply ignore any inner HTML that doesn’t apply.
This would allow us to write something like the following:
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<span style="color:red">Sorry, but your browser doesn't appear to support HTML5 video....</span>
</video>
So, how would this be parsed using the rules I’ve supplied? Suppose the browser doesn’t implement the <video> tag, well then it would be parsed like this:
<div>
<div></div>
<div></div>
<div></div>
<span style="color:red">Sorry, but your browser doesn't appear to support HTML5 video....</span>
</div>
So we have a bunch of <div> tags. We could use CSS to make it have the same dimmensions as the video would have if we like (making it still fit nicely in the design), and we have some fallback code there. Heck, the fallback code could a <script> tag, or perhaps even an <embed> tag which falls back onto flash content. This makes the options pretty much ideal.
So using this rule, how is that first block parsed if the browser does support the <video> tag? Well it’s pretty simple, it just acts like the <span> isn’t there since it isn’t applicable to a <video> tag. It ends up looking like this:
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
I’m not aware of any tags introduced by HTML which are outright incompatible with this concept. Many of the new tags are really just containers which have new semantic value. If treated like a <div>, we can use CSS to at least make them look the part.
To a certain degree this is already being done, the HTML5 standard says:
Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.
And applies the same rule to the <audio> tag. But this is specific to just <video> and <audio> tags, and doesn’t really spell out how arbitrary tags should be handled as far as I can tell. Can I put an script in there and expect it to work on older browsers? I don’t know because it just doesn’t say. But it’s a good start.
The result? We have plain HTML which will attempt to use the new feature first, and without depending on javascript, will gracefully fallback and display alternate content. Seems like an ideal solution to me. Not only that, but it would be easy to implement this in older browsers. The fact of the matter is, I didn’t see in the HTML5 specs exactly what the user agent is supposed to do when it encounters an undefined tag. It’s a big document, and perhaps I overlooked it, that’s certainly possible. But if it isn’t defined, then I think that is an oversight with regard to consistent behavior.