Download pptx - Making HTML5 Work Everywhere

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

http://jsbin.com/ocebej

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?

Todd Anglin@[email protected]

Thanks!