The browser detects HTML5 features using Modernizr.

The browser detects HTML5 features using Modernizr.

Recently, I am working on the company's mobile terminal operation project. animation is involved in many areas of demand. I believe that many front-end developers will have such feelings and are familiar with the animation attributes in CSS3. However, due to lack of deep understanding of the animation process, we often have to stop looking at it. Animation in CSS3 has a finishing touch on the Web page, which makes people shine. During this time, I will take the time to sort out the animation knowledge points and hope to share them with friends who need it at the same time, if you have any good suggestions or ideas, please share them with us. New Features of animation and other CSS3 can be well supported on mobile terminals, but for PC terminals, there are some unfriendly browsers (such as Internet Explorer 9 -) CSS3 features are not supported. To better use CSS3 features for better page effects, we will introduce the browser detection tool Modernizr.

Browser support and installation (two websites are shared)

Here we will share two common browser detection websites. One is to check the compatibility of browsers. The support for HTML5 and CSS3 functions does not depend on us. The final decision is determined by the browser developer, therefore, it is very important to understand the support of each browser for attributes and tags. The other is to check the installation of various browsers. This website can tell us how many browsers support the functions we want to use.

Browser compatibility Website: Can I use (click to try) http://caniuse.com/

Browser installation statistics site: http://gs.statcounter.com/

Modernizr

The detection function is an important strategy to cope with the differences in browser support. It takes a lot of time to write a new HTML5 Support Program, however, if we do not check the features, we are afraid that different browsers may have different support for the features. To solve this problem, we can use the previously written detection tool Modernizr. What kind of tool is Modernizr? It is a small, continuous update tool used to test the browser's support for many HTML5 and related functions.

Modernizr: https://modernizr.com/

How to Select Modernizr

Because the Modernizr tool is constantly complete, its JS library is becoming larger and larger. What we need is a purposeful choice of features to be checked, go to the Modernizr website and click the Add your detects button to go to the page. Select the desired attribute and download it.

For example, if I only want to use the canvas label, but do not know the support of various browsers, I only need to select Check canvas attribute package and download in Modernizr.

How to Use Modernizr

Modernizr is easy to use, as long as it is introduced directly in the head area.

<Script src = "modernizr-custom.js"> </script>

How to view detection results

Taking the complete Modernizr testing tool as an example, I will introduce how to view compatibility support for various features. To view the compatibility of features, you only need to go to the corresponding browser and open the developer mode. After viewing the html Tag, a class style table will be added, this style sheet provides statistics on the support of each feature. The feature has only two values: false or false if no is prefixed and true if no is prefixed.

For example:

No-canvas indicates that the browser does not support this feature.

Canvas indicates that the browser supports this feature.

Chrome:

Internet Explorer 8: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwPjxpbWcgYWx0PQ = "here write picture description" src = "http://www.bkjia.com/uploads/allimg/160416/041951DP-6.png" title = "\"/>

How to Use the class detected by Modernizr

After using Modernizr to check the browser's support for the HTML features required, we need to use it. In fact, we should be clear about it. Why do we need to check the browser's support for the features? Many browsers do not support the features of CSS3. If we use these new features in a large number of ways in terms of webpage performance, browsers that do not support this feature may cause errors in Webpage resolution, as a result, the page layout and functions are damaged. When Modernizr is used to detect the browser's support for features, the entire page can be well controlled.

For example, in a supported browser, you want to round the border, but in a browser that is not supported, you want to use a two-line border. Now you can write the Modernizr script in this way.

HTML:

Button

 

.header{            width: 80px;            background-color: #ccc;            padding: 10px;            margin: 10px;            text-align: center;        }        .borderradius .header{            border: thin #2DCB70 solid ;            border-radius: 20px;        }        .no-borderradius .header{            border: 5px #2DCB70 double;        }

Supports border-radius browsers:

Border-radius browsers are not supported:

Summary:Today, we will share and summarize the support of Modernizr in viewing HTML features to better use the new HTML5 features and use cutting-edge technologies in browsers that support new features, mature technologies are used in unsupported browsers to achieve better web page compatibility, and the visual effects of web pages displayed in different browsers will not differ much, making the smooth transition.