filling the html5 gaps with polyfills and shims
DESCRIPTION
Presentation deck I used to describe how you can leverage HTML5 & CSS3 features today while ensuring your sites still work great in older browsers.TRANSCRIPT
![Page 1: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/1.jpg)
Filling theHTML5 & CSS3Gaps with Polyfills
![Page 2: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/2.jpg)
• 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
![Page 3: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/3.jpg)
http://scriptjunkie.com
![Page 4: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/4.jpg)
Newest versions of HTML & CSS Supported by all modern browsers
IE9 RC Firefox Chrome Opera Safari
Snazzy new logo for HTML5
HTML5 & CSS3
![Page 5: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/5.jpg)
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?
![Page 6: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/6.jpg)
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
![Page 7: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/7.jpg)
Older Browsers?
![Page 8: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/8.jpg)
![Page 9: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/9.jpg)
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
![Page 10: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/10.jpg)
HTML5 Semantic Tags
Video element
Audio element
Canvas
Geolocation
CSS3 features
border-radius
box-shadow
Features that Need Help
![Page 11: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/11.jpg)
Semantic Tags
![Page 12: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/12.jpg)
nav
article
section
footer
aside
header
New Tags
Provide actual meaning to the
markup!
![Page 13: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/13.jpg)
<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
![Page 14: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/14.jpg)
<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
![Page 15: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/15.jpg)
Older Browsers?
![Page 16: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/16.jpg)
Older browsers don’t recognize the new tags
Internal stylesheets not updated
You can’t style elements not recognized
Recognition & Styling
![Page 17: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/17.jpg)
Recognition & Styling
![Page 18: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/18.jpg)
DemoSemantic Tags
![Page 19: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/19.jpg)
Video Tag
![Page 20: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/20.jpg)
Codec Support
Credit: Encoding.com
![Page 21: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/21.jpg)
<video controls width="500"> <source src="video.mp4“ type="video/mp4" /></video>
Usage
![Page 22: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/22.jpg)
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
![Page 23: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/23.jpg)
Older Browsers?
![Page 24: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/24.jpg)
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
![Page 25: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/25.jpg)
DemoVideo Tag
![Page 26: Filling the HTML5 Gaps with Polyfills and Shims](https://reader033.vdocuments.mx/reader033/viewer/2022061113/5459050eaf795953128b4bf7/html5/thumbnails/26.jpg)
Introducing HTML5
(Bruce Lawson & Remy Sharp)
HTML5: Up and Running
(Mark Pilgrim)
Books