Last update Thursday, October 8, 2009
HTML 5 is a kind of revolution in Web development nowadays, but is not well supported still. I put together here a list of workarounds and fallbacks you can use to start coding HTML5 while keeping a good cross browsers support. If you have suggestions just drop a comment !
HTML5 tags and IE
IE will fail to style tags it does not recognize, especially the new HTML5 semantic tags like section, article, aside… The workaround is to help it identify those tags by using this small piece of JavaScript :
Several JavaScript libraries help to detect http://www.modernizr.com/ or even to fix http://code.google.com/p/html5shiv/ HTML5 support in IE.
Source : http://blog.whatwg.org/supporting-new-elements-in-ie
Audio
A JavaScript exists which tests the audio element and the Audio() object support :
http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/
Canvas
A JavaScript library exists to simulate canvas tag in Internet Explorer : http://code.google.com/p/explorercanvas/
SVG
Google has developped a JavaScript library to simulate SVG in browser that does not support it http://code.google.com/p/svgweb/
Video
There are several support levels of the HTML 5 video tag. Internet Explorer does not support it at all. Firefox, Safari and Chrome, in there last release, support it but with different codecs. As a result the best way to use the video tag is : first, by providing sources with different codecs, second by providing a Flash fallback :
<source src="zombie.ogg" type="video/ogg"/>
<source src="zombie.mp4" type="video/mp4"/>
<embed src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash"
width="500" height="396"
allowscriptaccess="always"
allowfullscreen="true"/>
</video>
This fallback should be supported by all the major browsers. If you require more support for iPhone, Quicktime… you should give a look at other solutions like : Video for everybody
Sources :
http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Web Forms 2.0
A JavaScript library exists to emulate Web Forms 2.0 : http://code.google.com/p/webforms2/.
More information on Web Forms 2.0 emulation can be found here : http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
Web workers
The ability to do JavaScript threading is partially emulated by a JavaScript library : http://code.google.com/p/fakeworker-js/
Tags: html5, JavaScript
