making html5 work everywhere
DESCRIPTION
One of the great promises of HTML5 is that you can create software that runs everywhere. In many ways, HTML5 lives-up to this promise, but as with any evolving standard, support across different browsers and devices is inconsistent. To effectively adopt HTML5 today, developers must master the skills that fill-in the gaps and minimize the differences between HTML5 runtimes. In this session, you will learn the essential techniques needed to create HTML5 sites and apps that truly work everywhere. You will learn: • Learn four strategies for adopting HTML5 • Analyze the impact browsers have on HTML5 readiness & adoption • Explore new HTML5 features and techniques for using in older browsersTRANSCRIPT
Todd Anglin@toddanglin
Telerik
Todd Anglin@toddanglin
Telerik
EVP Product Strategy, Telerik5x Microsoft MVP, ASP Insider, O'Reilly Author
@toddanglin
Session Road Map
Understanding the Evolution
Adoption Strategies
Applied Techniques
Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
“While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”
-W3C on HTML4
HTML4 = Rough Guide
Unpredictable Browser Support
How is the web evolving?
<HTML>CSS:3;
ECMAScript();{ }“HTML5”
“Living Standard”
WebSockets FileAPI WebGL
HTML5 FormsGeolocation
Offline
Canvas
Video
Audio
Canvas
Video
Geolocation
Semantic Tags
SVGWHATWG | W3C | IETF
Where is everywhere?(Which browsers matter?)
Know your users.Know your browsers.
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”
“
Dean HachamovitchCorporate VP, IE
WD LC CR PR REC
In the future, browsers compete
on speed, not on features
In the future, browsers update
automatically and often
What is usable today?
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Lowest Common DominatorOnly use features natively available in all target browsers
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Polyfill EnrichedOnly use features either natively available OR available via JavaScript polyfill
X X
polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Alternate ExperiencesOnly use features available in target browsers AND design alternate experience for other browsers
X X
X X X
X X
progressiveenhancementgracefuldegradation
[Source: Aaron Olaf, Flickr]
[Source: Mercedes USA, http://mbusa.com/]
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Vertical TargetCreate experiences targeted at specific browsers (or classes of browsers)
X X
X X X
X X
11:05
$(“code”).show();
STRATEGY #1Lowest Common Denominator
THANKS FOR ATTENDING!Don’t forget to fill-out your evals.
The end.
Inte
rnet E
xplo
rer 6
»
Inte
rnet E
xplo
rer 7
»
Inte
rnet E
xplo
rer 8
»
Inte
rnet E
xplo
rer 9
»
Win
Phone 7.5
»
Android
4.0
»
Android
4.3
»
Safari
5.1 »
Win
Phone 8 »
Opera
11.6
0 »
Firefo
x 8 »
Chrom
e 17 »
Safari
6.0 »
iOS 6
.0 »
Opera
12 »
Chrom
e Mobile
»
Safari
7.0 »
iOS 7
.0 »
Firefo
x 24 »
Chrom
e 22 »
Firefo
x 28 »
Chrom
e 32 »
Chrom
e 33 »
0
100
200
300
400
500
600
25 26 41
138138
286287303320329337374378386389390397415430434448
498505
relative HTML5 scores
IE10
IE11
HTML5Test.com
IE6 IE7 IE8 IE9 IE10 IE11*0
102030405060708090
Supported HTML5/CSS3 FeaturesF
eatu
re C
ou
nt
As reported by CanIUse.com
Selectors (2.1)position:fixed
7.0 LocalStorageDragDrop API
JSONquerySelector
8.0
VideoAudioWOFFSVG
CanvasGeolocation
Semantic TagsLots of CSS3
9.0
XHR2Web WorkersWeb SocketsIndexedDBHistory API
File APICORS
Blob URLsTyped ArraysDefer/Async
Form ValidationNew Input Types
Offline App CacheMuch more CSS3
10.0
Don't sniff browsers.(Test for features.)
modernizr
Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.canvas { //Other Styles}
DEMOModernizr
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Inte
rnet
Exp
lorer
6 »
Inte
rnet
Exp
lorer
7 »
Inte
rnet
Exp
lorer
8 »
Inte
rnet
Exp
lorer
9 »
Safar
i 5.1
»
Inte
rnet
Exp
lorer
10
»
Ope
ra 1
1.60
»
Firefo
x 8
»
Chrom
e 17
»
Safar
i 6.0
»
Ope
ra 1
2 »
Chrom
e 22
»0
50100150200250300350400450500
25 26 41138
303 320 329 337 374 378 389434
relative HTML5 scores
STRATEGY #2Polyfill Enriched
Not all polyfills are created equal.
OldEquivalent
Plug-inBacked
JavaScriptPowered
Use legacy versions of
same feature
Implement feature using
JavaScript
Map browser feature to
plug-in feature
Memory & speed friendly
Limited API coverage
Portable & more completeCan be slow & memory hog
Complete API & speedy
Requires (user installed) plug-in
OldEquivalent
Plug-inBacked
JavaScriptPowered
• Fonts• LocalStorag
e• Semantic
Tags• Opacity• CORS
• CSS3 Selectors
• CSS Layouts
• Forms• Validation• JSON• Canvas*
• Database• Canvas*
html5please.com
Semantic Tags
Local Storage
Form ValidationGeolocation
CSS3 Selectors
STRATEGY #3
Graceful Degradation & Progressive Enhancement
exit PowerPoint; exec Demos;
Safe WarningCaution
• Relies on old native browser feature
• Does not interact with DOM/rendering
• Uses a plug-in (Flash/Gears) to do heavy lifting
Polyfill Guidance
• Large amount of JavaScript required
• Manipulates DOM/layout
• Superficial benefit (ex: rounded corners)
• Attempts to change rendering (CSS)
• Requires execution on page load
Which HTML5/CSS3 technique will you try today?
