How to detect the features of HTML 5?

Original Translation Address: http://www.ido321.com/1116.html

Original: Detect HTML5 Features

HTML5 feature Detection

Translator: Dwqs

With the popularity of HTML 5, HTML 5 now occupies a major market share, and HTML 5 adds a lot of new features that will make the Web experience even better. Most features are supported in modern, mainstream browsers, so we can safely use these new features to increase the web experience. However, when a new version of the browser is published, we do not forget some old version or old browser.

Another fact is that users want to support new features with older versions of the browser. Therefore, the product must be cross-browser, and the only thing we can do is HTML5 feature detection to ensure that the specified feature is supported by the browser before executing the code.

Modernizr is a very good JS library, it can complete the characteristics of HTML 5 and CSS 3 detection. By default, Modernizr detects all features (which can be customized, of course), but if you just want to detect a particular feature rather than introducing the entire JS library, you have to put the code in the right place. In this article, we will see how to use native JS and Modernizr to detect the features of HTML 5.

Canvas

//JS  return !! Document.createelement (' canvas '). GetContext;   //Modernizr if (Modernizr.canvas) {}

Video

//JS  return !! Document.createelement (' video '). Canplaytype;   //Modernizr if (Modernizr.video) {     }

Local Storage

//JS  return' localstorage ' in window && window[' localstorage 'null ;   //Modernizr if (modernizr.localstorage) {     }

Web Workers

//JS  return !! Window. Worker;   //Modernizr if (modernizr.webworkers) {     }

Offline WEB Application

//JS  return !! Window.applicationcache;   //Modernizr if (Modernizr.applicationcache) {     }

Geolocation

//JS  return' geolocation ' in navigator;   //Modernizr if (modernizr.geolocation) {     }

Placeholder Text

//JS  var i = document.createelement (' input '); return ' placeholder '  in I;   //Modernizr if (Modernizr.input.placeholder) {     }

Form Autofocus

//JS  var i = document.createelement (' input '); return ' Autofocus '  in I;   //Modernizr if (Modernizr.input.autofocus) {     }

Microdata

//JS  return !! Document.getitems;   MODERNIZR does not provide support to detect microdata

History API(for its introduction, please poke: http://www.ido321.com/1069.html article by Bole online reprint: http://blog.jobbole.com/ 78876/)

//JS  return !! (Window.history && history.pushstate);   //Modernizr if (modernizr.history) {     }

So far, this is a list of the code I've collected for feature detection. If you have a feature detection code that you want to share in the list, you can also tell me.

--------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------

This covers the web development, mobile development, Java and other programming languages, comprehensive information, SEO and other famous Bo, blog collection address: http://www.ido321.com/daohang/

How to detect the features of HTML 5?