The last few weeks have been stupidly busy with too many changes in focus but one of the most important steps forward has been the first full html5 website I’ve completed.
html5 for the win – well almost
Let me qualify that. The site was for a small physiotherapy clinic so this is a public customer site, it has to work and so the live version has been modified to get over IE’s little issues with unrecognised elements and css (John Resig has a clear blog article on this). I was really disappointed with having to take backward steps to get it fully working. Instead of being able to rely on header, nav, footer and section to div up my page I had to resort to wrapping these tags in the traditional html4 version div id="" and refering to them in css using the usual #divid syntax.
However, before all the disappointing modifications I managed to get some screenshots from the wonderful people at browsershots.org to give an idea of the take up so far of these new html5 elements in browsers. So for the record ([edit feb2015] original links blitzed):
The successes:
- Firefox 3.0.6 on fedora 7
- Firefox 3.0.4 on macOS 10.5
- Firefox 3.1 on windows XP
- Safari 4 on windows XP
- Safari 4 on macOS 10.5
- Safari 3 on windows XP
- Safari 2.0.4 on macOS 10.5
- Chrome 1.0.154.48 on windows XP
- Chrome 2.0.156.1 on windows XP
- Opera 8.54 on windows XP
- Opera 9.64 on fedora 7
- Opera 9.64 on windows XP
- Opera 10 on ubuntu 8.04
The failures:
- MS IE 4.01 on windows XP
- MS IE 5.5 on windows 2000
- MS IE 6 on windows 2000
- MS IE 7 on windows XP
- MS IE 8 on windows XP
- Firefox 1.5.0.4 on windows XP (partial)*
- Firefox 2.0.0.4 on windows 2000 (partial)*
- Firefox 2.0.0.19 on ubuntu 7.10 (partial)*
- Firefox 2.0.0.20 on macOS 10.5 (partial)*
*I think the issue with firefox 1 and 2 is also to do with the way the floats are dealt with rather than just the handling of html5. The white areas signify that the new elements are being recognised if not displayed correctly. They could also be ignoring the declared display:block; in the css.
An Elegant Solution
Since putting the modified site live I have discovered the work Remy Sharp has been doing with javascript to get over IE’s little problem. The principle is to use javascript to enter the unknown elements (e.g. header) into the IE DOM structure at the start of the page (in the <head> section), which tricks IE into rendering them. This is an ongoing project well worth a look, perhaps this sort of development will help bring the use of html5 in real sites that much closer.
I’ll be testing its use on my site and to see that the css for child elements is picked up and shown correctly, and hope to report better overall browser results. I may even be brave enough to get it live – though maybe not on my client’s site just yet 🙂