HTML 5

HTML 5 / JavaScript — No Comments
3
Oct 09

HTML 5 support workarounds and fallbacks

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
Audio
Canvas
SVG
Video
Web forms 2.0
Web Workers

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 :

document.createElement("section");

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 :

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