Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progressive Enhancement in
the age of HTML5 and
CSS3
using Modernizr
                               Paul Irish
           ...
HTML5 & CSS3 Coolness™
HTML5 & CSS3 Coolness™
Rounded corners         2D Transformations
@font-face fonts        CSS Gradients
Canvas            ...
ishtml5readyyet.com
ishtml5readyyet.com



                  U P !
  HU T wrong.
S    y   ou ’re
Modernizr
Making use of tomorrow’s technologies, today!
Feature Detection
     Just Detect It™
Native                        No Native
Implementation                Implementation
.fontface h1 {
                      ...
OM
    G it
onl     ’s
   y7
      k!
We got you covered, b.
Rounded corners         2D Transformations
@font-face fonts        CSS Gradients
Canvas            ...
Modernizr
 http://modernizr.com
      @modernizr


Me:
 http://paulirish.com
      @paul_irish

                        Ya...
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 support
Upcoming SlideShare
Loading in …5
×

Modernizr - Detecting HTML5 and CSS3 support

4,512 views

Published on

Published in: Technology, Design

Modernizr - Detecting HTML5 and CSS3 support

  1. 1. Progressive Enhancement in the age of HTML5 and CSS3 using Modernizr Paul Irish Molecular Standards.Next ’09 NYC
  2. 2. HTML5 & CSS3 Coolness™
  3. 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. 4. ishtml5readyyet.com
  5. 5. ishtml5readyyet.com U P ! HU T wrong. S y ou ’re
  6. 6. Modernizr Making use of tomorrow’s technologies, today!
  7. 7. Feature Detection Just Detect It™
  8. 8. Native No Native Implementation Implementation .fontface h1 { .no-fontface h1 { // use cool custom font! // far less awesome font // it’ll rock! } } if (Modernizr.fontface == false){ // Cufon fallback }
  9. 9. OM G it onl ’s y7 k!
  10. 10. 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 …and so on and so on.
  11. 11. Modernizr http://modernizr.com @modernizr Me: http://paulirish.com @paul_irish Yah, it’s open source. Fork it, baby.

×