<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>Lambda &#187; HTML 5</title> <atom:link href="http://sroucheray.org/blog/category/htlm5/feed/" rel="self" type="application/rss+xml" /><link>http://sroucheray.org/blog</link> <description>Stephane Roucheray's trivial work and thoughts</description> <lastBuildDate>Sun, 27 Jun 2010 13:30:08 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0</generator> <item><title>HTML 5 support workarounds and fallbacks</title><link>http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/</link> <comments>http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/#comments</comments> <pubDate>Sat, 03 Oct 2009 12:58:42 +0000</pubDate> <dc:creator>Stéphane Roucheray</dc:creator> <category><![CDATA[HTML 5]]></category> <category><![CDATA[JavaScript]]></category> <category><![CDATA[html5]]></category><guid
isPermaLink="false">http://sroucheray.org/blog/?p=305</guid> <description><![CDATA[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 !]]></description> <content:encoded><![CDATA[<p><em>Last update Thursday, October 8, 2009</em></p><p>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 !</p><ul><li><a
href="#html5-tags">HTML5 tags and IE</a></li><li><a
href="#audio">Audio</a></li><li><a
href="#canvas">Canvas</a></li><li><a
href="#svg">SVG</a></li><li><a
href="#video">Video</a></li><li><a
href="#web-forms">Web forms 2.0</a></li><li><a
href="#web-workers">Web Workers</a></li></ul><h2 id="html5-tags">HTML5 tags and IE</h2><p>IE will fail to style tags it does not recognize, especially the new HTML5 semantic tags like <tt>section</tt>, <tt>article</tt>, <tt>aside</tt>&#8230; The workaround is to help it identify those tags by using this small piece of JavaScript :</p><div
class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div
class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">document.<span
style="color: #660066;">createElement</span><span
style="color: #009900;">&#40;</span><span
style="color: #3366CC;">&quot;section&quot;</span><span
style="color: #009900;">&#41;</span><span
style="color: #339933;">;</span></div></div><p>Several JavaScript libraries help to detect <a
href="http://www.modernizr.com/">http://www.modernizr.com/</a> or even to fix <a
href="http://code.google.com/p/html5shiv/">http://code.google.com/p/html5shiv/</a> HTML5 support in IE.</p><p>Source : <a
href="http://blog.whatwg.org/supporting-new-elements-in-ie">http://blog.whatwg.org/supporting-new-elements-in-ie</a></p><h2 id="audio">Audio</h2><p>A JavaScript exists which tests the <tt>audio</tt> element and the <tt>Audio()</tt> object support :<br
/> <a
href="http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/">http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/</a></p><h2 id="canvas">Canvas</h2><p>A JavaScript library exists to simulate <tt>canvas</tt> tag in Internet Explorer : <a
href="http://code.google.com/p/explorercanvas/">http://code.google.com/p/explorercanvas/</a></p><h2 id="svg">SVG</h2><p>Google has developped a JavaScript library to simulate SVG in browser that does not support it <a
href="http://code.google.com/p/svgweb/">http://code.google.com/p/svgweb/</a></p><h2 id="video">Video</h2><p>There are several support levels of the HTML 5 <tt>video</tt> 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 :</p><div
class="codecolorer-container html4strict dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div
class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span
style="color: #009900;">&lt;video controls&gt;</span><br
/> <span
style="color: #009900;">&lt;source <span
style="color: #000066;">src</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;zombie.ogg&quot;</span> <span
style="color: #000066;">type</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;video/ogg&quot;</span><span
style="color: #66cc66;">/</span>&gt;</span><br
/> <span
style="color: #009900;">&lt;source <span
style="color: #000066;">src</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;zombie.mp4&quot;</span> <span
style="color: #000066;">type</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;video/mp4&quot;</span><span
style="color: #66cc66;">/</span>&gt;</span><br
/> <span
style="color: #009900;">&lt;embed <span
style="color: #000066;">src</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;http://blip.tv/play/AYGLzBmU8hw&quot;</span></span><br
/> <span
style="color: #009900;"> &nbsp; &nbsp;<span
style="color: #000066;">type</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;application/x-shockwave-flash&quot;</span></span><br
/> <span
style="color: #009900;"> &nbsp; &nbsp;<span
style="color: #000066;">width</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;500&quot;</span> <span
style="color: #000066;">height</span><span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;396&quot;</span></span><br
/> <span
style="color: #009900;"> &nbsp; &nbsp;allowscriptaccess<span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;always&quot;</span></span><br
/> <span
style="color: #009900;"> &nbsp; &nbsp;allowfullscreen<span
style="color: #66cc66;">=</span><span
style="color: #ff0000;">&quot;true&quot;</span><span
style="color: #66cc66;">/</span>&gt;</span><br
/> <span
style="color: #009900;">&lt;<span
style="color: #66cc66;">/</span>video&gt;</span></div></div><p>This fallback should be supported by all the major browsers. If you require more support for iPhone, Quicktime&#8230; you should give a look at other solutions like : <a
href="http://camendesign.com/code/video_for_everybody">Video for everybody</a></p><p>Sources :<br
/> <a
href="http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/">http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/</a><br
/> <a
href="https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox">https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox</a></p><h2 id="web-forms">Web Forms 2.0</h2><p>A JavaScript library exists to emulate Web Forms 2.0 : <a
href="http://code.google.com/p/webforms2/">http://code.google.com/p/webforms2/</a>.<br
/> More information on Web Forms 2.0 emulation can be found here : <a
href="http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers">http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers</a></p><h2 id="web-workers">Web workers</h2><p>The ability to do JavaScript threading is partially emulated by a JavaScript library : <a
href="http://code.google.com/p/fakeworker-js/">http://code.google.com/p/fakeworker-js/</a></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center"><ul
class="socials"><li
class="shr-delicious"> <a
href="http://delicious.com/post?url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;title=HTML+5+support+workarounds+and+fallbacks" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li><li
class="shr-digg"> <a
href="http://digg.com/submit?phase=2&amp;url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;title=HTML+5+support+workarounds+and+fallbacks" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li><li
class="shr-facebook"> <a
href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;t=HTML+5+support+workarounds+and+fallbacks" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li><li
class="shr-googlebuzz"> <a
href="http://www.google.com/buzz/post?url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a></li><li
class="shr-linkedin"> <a
href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;title=HTML+5+support+workarounds+and+fallbacks&amp;summary=HTML%205%20is%20a%20kind%20of%20revolution%20in%20Web%20development%20nowadays%2C%20but%20is%20not%20well%20supported%20still.%20I%20put%20together%20here%20a%20list%20of%20workarounds%20and%20fallbacks%20you%20can%20use%20to%20start%20coding%20HTML5%20while%20keeping%20a%20good%20cross%20browsers%20support.%20If%20you%20have%20suggestions%20just%20drop%20a%20comment%20%21&amp;source=Lambda" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a></li><li
class="shr-reddit"> <a
href="http://reddit.com/submit?url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;title=HTML+5+support+workarounds+and+fallbacks" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li><li
class="shr-stumbleupon"> <a
href="http://www.stumbleupon.com/submit?url=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;title=HTML+5+support+workarounds+and+fallbacks" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li><li
class="shr-twitter"> <a
href="http://twitter.com/home?status=HTML+5+support+workarounds+and+fallbacks+-+http://bit.ly/aVVLHR&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-yahoobuzz"> <a
href="http://buzz.yahoo.com/submit/?submitUrl=http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/&amp;submitHeadline=HTML+5+support+workarounds+and+fallbacks&amp;submitSummary=HTML%205%20is%20a%20kind%20of%20revolution%20in%20Web%20development%20nowadays%2C%20but%20is%20not%20well%20supported%20still.%20I%20put%20together%20here%20a%20list%20of%20workarounds%20and%20fallbacks%20you%20can%20use%20to%20start%20coding%20HTML5%20while%20keeping%20a%20good%20cross%20browsers%20support.%20If%20you%20have%20suggestions%20just%20drop%20a%20comment%20%21&amp;submitCategory=science&amp;submitAssetType=text" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li></ul><div
style="clear:both;"></div></div>]]></content:encoded> <wfw:commentRss>http://sroucheray.org/blog/2009/10/html5-support-workarounds-and-fallbacks/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced) (user agent is rejected)
Database Caching 19/24 queries in 0.091 seconds using disk

Served from: sroucheray.org @ 2010-07-31 15:00:03 -->