Progressive Enhancement in the age of HTML5 and CSS3using Modernizr

Paul Irish

Molecular

NC jQuery & JavaScript Camp ’10

HTML5 & CSS3 Coolness™

Rounded corners @font-face fontsCanvasrgba(), hsla() colorsborder-imagebox-shadowHTML5 Audio & VideoCSS AnimationsCSS Transitions

2D TransformationsCSS GradientsSVGGeolocationCSS ColumnsHTML5 FormsWeb WorkersOffline Web Apps…and so on and so on.

HTML5 & CSS3 Coolness™

ishtml5readyyet.com

ishtml5readyyet.com

SHUT UP!

you’re wrong.

ModernizrMaking use of tomorrow’s technologies, today!

Feature DetectionJust Detect It™

Native Implementation

. box {// use border-radius

}

No Native Implementation

.no-borderradius .box {// maybe less padding?

}

if (Modernizr.borderradius == false){// call up DD_roundies, etc.

}

OMG it’s only 7k!

Rounded corners @font-face fontsCanvasrgba(), hsla() colorsborder-imagebox-shadowHTML5 Audio & VideoCSS AnimationsCSS Transitions

2D TransformationsCSS GradientsSVGGeolocationCSS ColumnsHTML5 FormsWeb WorkersOffline Web Apps…

We got you covered, b.

Rounded corners @font-face fontsCanvasrgba(), hsla() colorsborder-imagebox-shadowHTML5 Audio & VideoCSS AnimationsCSS Transitions

2D TransformationsCSS GradientsSVGGeolocationCSS ColumnsHTML5 FormsWeb WorkersOffline Web Apps…and so on and so on.

We got you covered, b.

webGLSMILhashchange eventlocalStoragesessionStoragepostMessagehtml5 drag ‘n dropweb sql database

Modernizr

http://modernizr.com

@modernizr

Me:

http://paulirish.com

@paul_irish

Yah, it’s open source. Fork it, baby.