Building cross browserHTML5 web apps

Rajasekharan VengalilDeveloper EvangelistMicrosoft Corporation, India

bit.ly/avranju@avranju

rajave@microsoft.com

Agenda

Challenges with using HTML5/CSS3 todayBrowser fragmentationFeature support levels

Feature detection with ModernizrPolyfills and shimsBest practices around using HTML5 and CSS3 now!

Challenges using HTML5 & CSS3 today

Browser fragmentationUsers spoiled for choice – good for users, not so good for you!

Significant chunks of people using older versions of browsers

IE6 – Go away already!

Keeping track of feature matrix requires super human capabilities

Browser market share – October 2011

29.00%

13.65%

10.18%

9.79%

7.50%

5.56%

5.41%

3.12%3.04%

12.09%

IE8Chrome 14FF 7IE9IE6FF3.6IE7FF6Safari 5.1Others

Source: http://www.netmarketshare.com/

Managing browser features

Have to worry about:Different browsersDifferent versions of each browserNew versions were released since you last blinked!

Managing browser features

Browser detection - #Fail!Forced to assume supportTracking feature support – verrrry hard!

Must deal with this ->

Feature detection

Modernizr

Feature detection

Make decisions based on features supported

NOT browser versionsCheck for a specific object, method, property or behaviorDynamically load libraries for missing features

Don’t do this

// If not IE then use addEventListener…if (navigator.userAgent.indexOf("MSIE") == -1) {

window.addEventListener( “load”, popMessage, false );} else if (window.attachEvent) {

window.attachEvent(“onload”, popMessage);}

Do this instead

if (window.addEventListener) {window.addEventListener(

“load”, popMessage, false );} else if (window.attachEvent) {

window.attachEvent(“onload”, popMessage);}

Feature detectiondemo

But…

What if feature detection looked like this:

function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet;

var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };

Modernizr to the rescue!

Modernizr

Detects all major HTML5 and CSS3 featuresIncludes HTML5 shim for semantic tags on older (<cough> IE) browsersGaining wide tractionShipped with ASP.NET MVC3 Tools Update

Modernizr version of that scary code

Detecting @fontface support

if(Modernizr.fontface){…}

Modernizr + Semantic Tags

demo

Polyfills and Shims

Polyfills and Shims

Swanky new feature

But old browser!

Your app!

Polyfills

Polyfills – support new standards in older browsers via libraries

“Polymorphic Backfilling”Equivalent fidelity in user experience not guaranteedYou get to leverage new specs without losing user baseE.g. a canvas polyfill that uses Silverlight on older browsers

Shims

Shims are just regular libraries that provide missing functionalityDon’t necessarily conform to any standard spec or APITend to be feature richProvide higher level abstractionsE.g. “Amplify Store” API - provides client-side storage

Polyfills and Shims

Big list of polyfills and shims herehttp://bit.ly/b5HV1x

RememberVet the codeYou may have to support it in the future

Example 1 - Doodling

demo

Another Example – HTML5 Video

Old and uncool way<object type="application/x-silverlight-2" width="640" height="384"> <param name="source" value="http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_1

8.xap"></param><param name="initParams"

value="deferredLoad=true,duration=0,m=http://mysite.com/videos/big_buck_bunny.mp4,autostart=true,autohide=true,showembed=true"></

param><param name="background" value="#00FFFFFF"></param><a href="http://go.microsoft.com/fwlink/?LinkID=124807"

style="text- decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181"

alt="Get Microsoft Silverlight" style="border-style: none"/>

</a> <param name="x-allowscriptaccess" value="never"></param> <param name="allowScriptAccess" value="never" /> <param name="wmode" value="opaque" /></object>

New and cool way

<video controls width="500"> <source src="video.mp4“ type="video/mp4" /></video>

Codecs sob story

Credit: Encoding.com

Support everybody

<video controls width="500"><source src="video.mp4" type="video/mp4“ /><source src="video.ogg" type="video/ogg“ /><source src="video.webm" type="video/webm“ />

</video>

But…

What about old browsers?

Fallback to Silverlight/Flash

<video controls width="500"><source src="video.mp4" type="video/mp4“ />

<object type="application/x-silverlight-2“ width="640" height="384"> … more stuff here … </object></video>

Example 2 - Videodemo

Resources

Books you might like

Introducing HTML5Bruce Lawson / Remy Sharp

HTML5 for Web DesignersJeremy Keith

CSS3 for Web DesignersDan Cederholm

Shameless Plug

blogorama.nerdworks.in rajave@microsoft.com @avranju

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.