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,465 views

Published on

Published in: Technology, Design
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
4,465
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
98
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide
  • awesome shit!

    js solutions for many of these, but in 95% of cases, the result with the native css approach has a better result - responsive, faster, less code.

    transforms. transitions. @font-face
  • omg is html5ready yet ??
    UGH.

    the challenge is: how do you use these features across browsers, progressively enhancing where possible
  • omg is html5ready yet ??
    UGH.

    the challenge is: how do you use these features across browsers, progressively enhancing where possible
  • in other words: super easy to have multiple levels of support in site, one for each degree of sophistication
    that’s how i ended up w/modernizr
    allows you to start using html5+css3 coolness today, and have full control over what your html,css and js do in browsers that don’t have features
    Which brings me to the most important part of this presentation:
  • FEATURE DETECTION aka object detection is good
    sniffing is bad

    all browsers. future-proof
  • FEATURE DETECTION aka object detection is good
    sniffing is bad

    all browsers. future-proof
  • awesome shit!

    js solutions for many of these, but in 95% of cases, the result with the native css approach has a better result - responsive, faster, less code.
  • 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.

    ×