The State of HTML5: Summer 2011

Paul Irish
Google Chrome, Developer Advocate


These slides: goo.gl/kzBAE
@paul_irish
+Paul Irish

In order to view this presentation accurately, you'll want to use Chrome Dev Channel.

You can navigate with and use on bullets.

HTML5: Where are we now?

What's practical to actually use?

Different kinds of features..
  • Just works. (everywhere)
    <!doctype html>

  • Lack of support is OK

  • Defensible space
    tools for (web) developers, chrome web store, phonegap app

  • Polyfills

Tiered, Adaptive Front-end Experiences


Different kinds of features..
  • Just works. (everywhere)

  • Lack of support is OK

  • Defensible space
    tools for (web) developers, chrome web store, phonegap app

  • Polyfills

What browsers do you support?
Data from an HTML5 Boilerplate developers survey
Different kinds of features..
  • Just works. (everywhere)

  • Lack of support is OK

  • Defensible space
    tools for (web) developers, chrome web store, phonegap app

  • Polyfills

You're a cross-browser warrior

You feature detect, right?

Modernizr does that.

polyfill:

(n) 1. A shim that mimics a standard API, providing fallback functionality to older browsers.

e.g. geolocation polyfill

Let's break this up.

Dependable features

Roughly usable features

Experimental features

Edge features

Dependable features
Roughly usable features
Experimental features
  • form input types
  • <meter> & <progress>
    progress:
    meter:
  • web SQL database & IndexedDB
  • web workers
  • WebGL
  • history.pushState
  • File API
  • applicationCache
  • Page Visibility
  • <input accept="" multiple>
  • <input speech>
Edge features

Featuring: yepnope.js v1.0

While you can provide consistent features everywhere, maybe you shouldn't.

Be the champion of performance

Two Performance Truths:

Both you and the client want the most responsive experience possible.

Everything added to the page slows it down.

Aim for a great experience.

An excellent experience is better than feature parity across browsers

HTML5 Boilerplate

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

In conclusion...

You can use this stuff today

Join the community

Get involved
Thank you, kindly.