1. Progressive Enhancement in
the age of HTML5 and
CSS3
using Modernizr
Paul Irish
Molecular
NC jQuery & JavaScript Camp ’10

2. HTML5 & CSS3 Coolness™

3. HTML5 & CSS3 Coolness™
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Offline Web Apps
CSS Transitions …and so on and so on.

4. ishtml5readyyet.com

5. ishtml5readyyet.com
U P !
HU T wrong.
S y ou ’re

6. Modernizr
Making use of tomorrow’s technologies, today!

8. Feature Detection
Just Detect It™

10. Native No Native
Implementation Implementation
. box { .no-borderradius .box {
// use border-radius // maybe less padding?
} }
if (Modernizr.borderradius == false){
// call up DD_roundies, etc.
}

12. OM
G it
onl ’s
y7
k!

13. We got you covered, b.
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Offline Web Apps
CSS Transitions …

14. We got you covered, b.
Rounded corners 2D webGL
Transformations
@font-face fonts SMIL
CSS Gradients
Canvas hashchange
SVG event
rgba(), hsla()
colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio & Web Workers html5 drag ‘n
Video drop
Offline Web Apps
CSS Animations web sql
…and so on and database
CSS Transitions so on.

15. Modernizr
http://modernizr.com
@modernizr
Me:
http://paulirish.com
@paul_irish
Yah, it’s open source. Fork it, baby.