How to check the features of HTML 5 ?, Html Feature Detection

How to check the features of HTML 5 ?, Html Feature Detection

Http://www.ido321.com/1116.html:

Original article: Detect HTML5 Features

Translation: HTML5 Feature Detection

Translator: dwqs

With the popularity of HTML 5, HTML 5 now occupies a major market share. HTML 5 has added many new features that can improve the Web experience. 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 browser is released, do not forget the old version or old version of browser.

Another fact is that users want to use the old version of browsers to support new features. Therefore, the product must be cross-browser, and the only thing we can do is HTML5 Feature Detection to ensure that the code is executed only when the specified feature is supported by the browser.

Modernizr is a very good JS library that can detect features of HTML 5 and CSS 3. By default, modernizr detects all features (which can be customized), but if you only want to detect a specific function, instead of introducing the entire JS library, then you have to place the code in the correct position. In this article, we will see how to use native js and modernizr to detect the features of HTML 5.

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 (for its introduction, stamp: http://www.ido321.com/1069.html Article reposted by bole online: http://blog.jobbole.com/78876)

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

 

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

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here covers Web development, mobile development, Java programming language, integrated information, SEO and other famous Bo, blog collection set address: http://www.ido321.com/daohang/

When I use HTML5 to write a website, how is it HTML401? The following describes

Your website should be html5. This check is based on the doctype HTML Statement on the top. Is it a problem with your local browser? I will check that your website is html5




How can I determine whether a page is an html5 page? Is there any tool to detect it?

It's easy to view the source code and document type (<! DOCTYPE html>) and html tags, such:
<Video>, <audio>, <canvas>, etc.