How to add HTML5 shim to your Seaside Application


HTML5 is wonderful. Only 15 years after HTML conquered the web we finally can add a regular expression to input fields for browser-side validation. And finally we have the chance to render Date or Time input widgets easily.

And Seaside comes with partial support for HTML5, and the not yet supported stuff can easily be added, because it’s only new tags or tag attributes.

The only problem is that most browsers (or better: Browser versions) in use out in the wild – especially if they ship with Windows – do not support HTML5 (well, no Browser fully supports it today, Opera and Chrome seem to have the best support at the moment).

Most Browsers however, just ignore the HTML5 stuff and render dull, good-old input fields. For the rest of them (like IE 8 and older), there is a script to help them ignore them, so that HTML5 attributes don’t hurt at least. It’s called HTML5Shim (or shiv)  and can be found at Google Code:

[…] HTML5 JavaScript shim for IE to recognise and style the HTML5 elements.

To use, include the following script in your <head> element above your CSS:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Don’t expect it to wonderously turn IE 6 into an HTML5 compliant Browser, but at least you see no strange artefacts in pages that use HTML5.

As a Seaside user, you need to add the above-mentioned HTML code into the <head> section of rendered pages. Seaside Components have a method called #updateRoot: that is here to put stuff into the <head>. Seaside even supports conditional comments for the html root in Class WAConditionalComment. So it’s easy to add the comment by using:

 updateRoot: aHtmlRoot
   aHtmlRoot if lessThan; ie: '9';
     do: [aHtmlRoot script url: 'http://html5shim.googlecode.com/svn/trunk/html5.js'; type: 'text/javascript'].
   super updateRoot: aHtmlRoot

But in case of this script, you need to make sure it is the first script the page links to. WAComponent’s updateRoot: gets executed after all the file libraries have been added to theand therefor the script won’t work.

Every day there’s something new I learn about Seaside, and yesterday it was that updateRoot: is also implemented in WAFileLibrary. These are processed first. So all you need to do is implement the very same method in y File Library, make sure the library is added as very first library at application registration and the shim ends up being the first element on your pages.

Now it’s safe to serve pages including html5 goodies to older IE versions. They still don’t work as you want them to, but the pages aren’t rendered in all the strangest ways😉