Upload
rajasekharan-vengalil
View
111
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Best practices for building cross browser compatible
web apps
Rajasekharan VengalilDeveloper EvangelistMicrosoft Corporation, India
bit.ly/avranju@avranju
Agenda
Challenges with using HTML5/CSS3/ES5 todayBrowser fragmentationFeature support levels
Feature detection with ModernizrA note on CSS3 vendor prefixes – an appeal!Polyfills and shimsBest practices around using HTML 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 – March 2012
25.40%
15.17%
14.73%
22.08%
7.79%
6.90%
4.48%3.45%
IE8
IE9
Chrome 17
Others
FF 10
IE6
IE7
Safari 5.1
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
A note on CSS3 vendor prefixes
An appeal
CSS3 Vendor Prefixes
Vendor prefixes are good – you get to experiment-ms--webkit--moz-
Supporting only one vendor is not!Don’t make Chrome the new IE6!
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/polyfills
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 [email protected] @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.