HTML 5 is probably the most exciting improvement to come to the web, since the popularization of AJAX. However, as shown by last weeks article (HTML 5 Forms), only the most cutting edge browsers support many of the new HTML 5 features. To progressively enhance a site for HTML 5 enabled browsers, developers need a way to detect if the browser supports a desired HTML 5 feature. Enter Modernizr by Faruk Ates and Paul Irish.
How to do it…
Some examples of available HTML 5 feature detection:
if (Modernizr.canvas) { // canvas feature } else { // fallback } if (Modernizr.localstorage && Modernizr.sessionstorage) { // storage feature } else { // fallback }
Some examples of available HTML 5 and CSS 3 feature detection:
if (! Modernizr.borderradius) { // borderradius fallback } if (! Modernizr.boxshadow) { // boxshadow fallback }
Some examples of available HTML 5 input feature and attribute detection:
if (! Modernizr.inputtypes.email){ // input type email fallback } if (! Modernizr.input.placeholder){ // placeholder text fallback }
All the above detections using the YUI 3 Gallery version of Modernizr:
YUI({ modules: { fullpath:http://github.com/mattsnider/yui3-gallery/raw/master/build/gallery-modernizr/gallery-modernizr-min.js} }).use(gallery-modernizr, function(Y) { if (Y.Modernizr.canvas) { // canvas feature } else { // fallback } if (Y.Modernizr.localstorage && Y.Modernizr.sessionstorage) { // storage feature } else { // fallback } if (! Y.Modernizr.borderradius) { // borderradius fallback } if (! Y.Modernizr.boxshadow) { // boxshadow fallback } if (! Y.Modernizr.inputtypes.email){ // input type email fallback } if (! Y.Modernizr.input.placeholder){ // placeholder text fallback } }