Filling theHTML5 & CSS3Gaps with Polyfills

• Microsoft Community Mgr.

• Editor of Script Junkie

• Ajaxian.com writer

• Director of Community for jQuery JS Library Project Team

• JavaScript & HTML5 fan boy

Rey Bango

http://scriptjunkie.com

Newest versions of HTML & CSS Supported by all modern browsers

IE9 RC Firefox Chrome Opera Safari

Snazzy new logo for HTML5

HTML5 & CSS3

HTML5: Canvas – API for 2D drawing Audio & Video – In-browser audio & video; no plugins New semantic elements such as article, footer, header, nav

& section Geolocation IndexedDB – offline storage More…

CSS3: border-radius 2D tranforms @font-face More…

So What’s in It?

Features I REALLY like:

New semantic elements such as article, footer, header, nav & section

Canvas – API for 2D drawing Video – In-browser video; no plugins Geolocation IndexedDB – offline storage Border-radius – Rounded corners \0/ Fonts!!!

It’s Very Cool

Older Browsers?

Support for older browsers

Use polyfills to fallback gracefully or mimic functionality

HTML5Shim – Remy Sharp

Modernizr – Paul Irish

Explorercanvas – Erik Arvidsson

Socket.IO – Guillermo Rauch

Big List of Polyfills: http://bit.ly/b5HV1x

Polyfills & Shims

HTML5 Semantic Tags

Video element

Audio element

Canvas

Geolocation

CSS3 features

border-radius

box-shadow

Features that Need Help

Semantic Tags

nav

article

section

footer

aside

header

New Tags

Provide actual meaning to the

markup!

<div id=”nav”><div id=”nav”><div id=”nav”><div id=”nav”>

<div <div id=”sidebar”>id=”sidebar”>

<div <div id=”sidebar”>id=”sidebar”> <div id=”article”><div id=”article”><div id=”article”><div id=”article”>

<div id=”footer”><div id=”footer”><div id=”footer”><div id=”footer”>

<div id=”header”><div id=”header”><div id=”header”><div id=”header”>

HTML Tags

<nav><nav><nav><nav>

<aside><aside><aside><aside> <section><section> <article><article><section><section>

<article><article>

<footer><footer><footer><footer>

<header><header><header><header>

Semantic HTML Tags

Older Browsers?

Older browsers don’t recognize the new tags

Internal stylesheets not updated

You can’t style elements not recognized

Recognition & Styling

Recognition & Styling

DemoSemantic Tags

Video Tag

Codec Support

Credit: Encoding.com

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

Usage

Fallbacks can be used to degrade gracefully for different codecs

<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>

Regressive Enhancement

Older Browsers?

Create a solid cross-browser base to start from & use HTML5 to enhance sites

If HTML5 video is not supported, Flash or SilverLight video will load

<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“ /><embed src="http://blip.tv/play/gcMV" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>

</video>

Progressive Enhancement

DemoVideo Tag

Introducing HTML5

(Bruce Lawson & Remy Sharp)

HTML5: Up and Running

(Mark Pilgrim)

Books

@reybango

blog.reybango.com

reybango@gmail.com