Home  >  Article  >  Web Front-end  >  How to detect HTML 5 features? _html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:55:011041browse

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/

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn