Modernizr: A powerful tool for HTML5 and CSS3

With the rapid development of HTML5 and CSS3, more and more semantic tags and cool features have been applied to web application development. Major browser manufacturers have begun to support these new features, and web developers are also interested in trying these new features to develop more colorful and interesting applications. However, the version compatibility issues caused by the uneven support of these new features (especially the headache-inducing IE) are always a nightmare that lingers in the minds of developers. Traditional usage habits make it difficult for us to abandon old versions of browsers, and developers can only choose boring manual testing, test, and then test.

In order to solve this problem, Modernizr came into being. Its name sounds a bit like Modernize, and indeed, the name originated from the purpose of making the development experience more modern, but it is not an attempt to modernize the old browser, that is, it supports these new features (although you can indeed make the browser support certain new features that are not supported by adding shim/polyfill scripts, as will be covered later).

Modernizr is an open source js library that detects browsers' support for HTML5 and CSS3 features. The famous HTML5/CSS3 browser compatibility website FindmeByIP is based on this framework. We can use it to detect whether the browser supports some new feature, and even load scripts additionally to meet your needs to dynamically load different js files according to different situations to reduce downloads and improve performance.

Modernizr provides two versions: development and production. The development version includes detection of all new HTML5 and CSS3 features, suitable for learning and testing. For beginners who are just starting to use Modernizr, Bella recommends that you use this version. Once you are familiar with the working principle of Modernizr, you can use the custom version of production. You can download only as many features you need to detect to greatly reduce the number of downloads, which can slightly improve the performance of your program to some extent. You can download these two versions at http://modernizr.com/download/, click the development version link on the page to download the development version, or you have seen the following feature display page

You can check any HTML5 or CSS3 feature you want to test, but by default, the Extra category will be selected as follows:

a) HTML5 Shiv v3.6: It adds a script—HTML5 shim It forces IE6-8 to correctly design and print HTML5 elements. If you plan to use new HTML5 semantic tags, such as <header>, <footer>, <nav>, <section>, <article>, etc., then you need to select this option.

b) Modernizr.load(yepnope.js): It adds an optional script loader that is not included in the development version. It increases 3KB of downloads, so if you don't need it, you can give up choosing it.

c) Add CSS Classes: It adds the Modernizr class to the starting tag. If you want to detect support for CSS3 features, you must select this option.

The method of using Modernizr is very simple. After you download the development version, you only need to introduce the js library file into the page, such as:

After adding the Modernizr reference, when the js program runs, it will add a batch of CSS class names to the html element. These class names mark which features support and which features do not support in the current browser. If it supports it, the corresponding feature name will be displayed. If it does not support it, the no-feature name will be displayed. For example, if the detected browser supports the CSS3 property boxshadow, Modernizr will add the boxshadow class to the tag, otherwise, the no-boxshadow class will be added. The figure below shows the support for new HTML5 and CSS3 features on chrome 23.0.1271.64.

Then, you just need to define the corresponding style information in your CSS style sheet, you can define it like below:

Since the browser ignores the unsupported CSS3 feature, if the current browser version does not support the boxshadow property, it will ignore the boxshadow class and instead refer to the styles defined in the no-boxshadow class, saving you the troublesome logic of detecting the browser name in the js program.

Of course, when your application scenario requires you to determine whether a new feature is supported in the program and give different processing logic, you can also use Modernizr to make judgments easily. At this time, you need to use a global object named Modernizr created by Modernizr. The content is a list of Boolean results given for each detected feature. If the browser supports the boxShadow property, then the value of Modernizr.boxShadow is true, otherwise it is false. Therefore, after introducing the library file, you can also use this method to detect the browser's support for this feature. This js object also contains more detailed information for certain functions. For example, Modernizr.video.h264 will tell you whether the browser supports this special codec, and Modernizr.inputtypes.search will tell you whether the current browser supports the new search input type.

In addition, if Modernizr does not contain the features you need to detect, you can call the Modernizr encapsulated addTest function to test. For different HTML5 and CSS3 features, we can find many of the already written addTest functions on github (for some reason, Modernizr is blocked, and the project is now hosted on github). Let's take a look at a simple example. If you want to test whether the browser supports getusermedia API (API in the new WebRTC technology), you can write the following addTest function to test:

I believe that after a brief introduction, you have already experienced the convenience that Modernizr can bring to development. After understanding the functions of Modernizr and how to use Modernizr, you can also learn a lot of new knowledge by looking at its source code and familiarizing yourself with its implementation principles. Although Bella is a rookie in this regard, she still shares some experience with you on reading the source code.

Bella mentioned the global object Modernizr earlier. How is it created in Modernizr? Let's look at the following source code:

This part of the code uses an asynchronous function to generate a namespace (although there is no real namespace in js), and the function returns a Modernizr object, which is assigned to window.Mordernizr, so that other js programs can directly use window.Modernizr or Modernizr objects. The parameter passed in when the function is called refers to the context environment of the function execution, that is, the global object of window.

How does Modernizr test the level of support for new features of CSS3? It turns out that Modernizr will first create a DOM object, and then use the style attributes under this object to test whether it supports the new CSS3 features. The code is as follows:

For the browser, whether it can recognize our newly created html tag or not, we can style it, so we can style the newly created tag here. Suppose we want to test whether the browser supports hsla to define colors in CSS, we can first write a style with the hsla attribute applied to put it under the label, and then check whether the style value contains hsla strings. If the browser does not support it, there will be no hsla strings (because the action of putting the style with the hsla attribute applied to the modernizr tag will not take effect at all). We can write the following code:

Here, since some browsers will convert the notation of hsla to rgba, we also check whether there is the rgba string.

For CSS attributes with vendor prefix, we need to give different treatments. Returning to the boxShadow property, Modernizr will test whether there are boxShadow, WebkitBoxShadow, MozBoxShadow, OBoxShadow, msBoxShadow or KhtmlBoxShadow properties under the mStyle variable created above. If so, it means that the browser supports this property. Here we mainly use two Modernizr encapsulated functions, one is testProp() and the other is testAllProps(). Modernizr.testProp(str) returns whether a given style property can be recognized, while Modernizr.testAllProps(str) returns whether a given style property can be recognized, or whether any style property with a vendor prefix can be recognized.

For more source code knowledge, I will introduce it to you after Bella has more in-depth research in the future. Bella believes that if you are familiar with the principles and usage of Modernizr, it will definitely help you improve development efficiency.

Finally, Bella briefly summarizes some materials for everyone to learn from Modernizr:

1. Modernizr official website: http://modernizr.com/docs/ You can learn Modernizr knowledge, source code and download Modernizr from it.

2. Modernizr Test Suite URL: http://modernizr.github.com/Modernizr/test/index.html You can query the support status of HTML5 and CSS3 features of each browser above. The query method:

Click Show the Ref Tests from Caniuse and Modernizr at the bottom of this page, and then click any of the Table links for the tested HTML5 or CSS3 features to see the support of each browser.

3. Shim/polyfill script related information: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

4. Download addresses of various addTest functions that detect new HTML5 and CSS3 features:

https://github.com/Modernizr/Modernizr/tree/master/feature-detects

This article is from Tencent Wuhan Blog. Please indicate the source when reprinting