How to detect HTML 5 features? _html/css_WEB-ITnose

Original translation address: http://www.ido321.com/1116.html

Translation: HTML5 feature detection

Translator: dwqs

With the popularity of HTML 5, HTML 5 now occupies the main market share. HTML 5 has added many new features, which can make the Web experience better. Most features are supported in modern mainstream browsers, so we can safely use these new features to enhance the web experience. However, when a new version of the browser is released, we should not forget some old versions or old browsers.

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

Modernizr is a very good JS library that can complete feature detection of HTML 5 and CSS 3. By default, modernizr will detect all features (of course it can be customized), but if you only want to detect a specific feature without importing the entire JS library, then you have to put the code in the right place. In this article, we will see how to detect HTML 5 features using native js and modernizr.

Canvas

// JSreturn !!document.createElement('canvas').getContext;   // Modernizrif (Modernizr.canvas) {}

Video

// JSreturn !!document.createElement('video').canPlayType;   // Modernizrif (Modernizr.video) {     }

Local Storage

// JSreturn 'localStorage' in window && window['localStorage'] !== null;   // Modernizrif (Modernizr.localstorage) {     }

Web Workers

// JSreturn !!window.Worker;   // Modernizrif (Modernizr.webworkers) {     }

Offline Web Application

// JSreturn !!window.applicationCache;   // Modernizrif (Modernizr.applicationcache) {     }

Geolocation

// JSreturn 'geolocation' in navigator;   // Modernizrif (Modernizr.geolocation) {     }

Placeholder Text

// JSvar i = document.createElement('input');return 'placeholder' in i;   // Modernizrif (Modernizr.input.placeholder) {     }

Form Autofocus

// JSvar i = document.createElement('input');return 'autofocus' in i;   // Modernizrif (Modernizr.input.autofocus) {     }

Microdata

// JSreturn !!document.getItems;   // Modernizr does not provide support to detect Microdata

History API (About For its introduction, please click: http://www.ido321.com/1069.html The article was reprinted by Bole Online: http://blog.jobbole.com/78876/)

// JSreturn !!(window.history && history.pushState);   // Modernizrif (Modernizr.history) {     }

This is the list of feature detection codes I have collected so far. If you have feature detection code that you would like to share on the list, you can also tell me.

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

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