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

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 :
<video controls>
<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: ,

Leave a comment