Modernizr - Detecting HTML5 and CSS3 support
5 likes1,569 views
The document discusses using Modernizr to provide progressive enhancement for HTML5 and CSS3 features. It lists many new features in HTML5 and CSS3 like rounded corners, transformations, gradients, etc. It explains that Modernizr allows using tomorrow's technologies today through feature detection, and will apply native implementations if supported or fallback options if not. It positions Modernizr as a way to get coverage for all the new HTML5 and CSS3 features, in an open source library that can be forked on GitHub.
Modernizr - Detecting HTML5 and CSS3 support
- 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.
- 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.
Editor's Notes
- #3: 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
- #4: omg is html5ready yet ?? UGH. the challenge is: how do you use these features across browsers, progressively enhancing where possible
- #5: omg is html5ready yet ?? UGH. the challenge is: how do you use these features across browsers, progressively enhancing where possible
- #6: 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:
- #7: FEATURE DETECTION aka object detection is good sniffing is bad all browsers. future-proof
- #8: FEATURE DETECTION aka object detection is good sniffing is bad all browsers. future-proof
- #12: 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.