Measure the test taker's knowledge about HTML5 and CSS3 support-

This article mainly introduces how to check the browser's support for HTML5 and CSS3. Modernizr is used to check the browser's compatibility with HTML5 and CSS3 Code. For more information, see HTML5, CSS3 and other related technologies such as Canvas and WebSocket bring Web application development to a new height. By combining HTML, CSS, and JavaScript, this technology can develop the effects of desktop applications. Although HTML5 promises a lot, HTML5-supported browsers and HTML5 standards are far from mature. It is unrealistic and time-consuming to support browsers. Therefore, when we decide to develop Web applications using HTML5 technology, we need to check the features supported by browsers.

Modernizr can help you check the HTML5 features supported by browsers.

The following code checks whether the browser supports Canvas:

The Code is as follows:

Script
Window. onload = function (){
If (canvasSupported ()){
Alert ('canvas ororted ');
}
};

Function canvasSupported (){
Var canvas = document. createElement ('canvas ');
Return (canvas. getContext & canvas. getContext ('2d '));
}
Script

The following code checks whether the browser supports local storage:

The Code is as follows:

Script
Window. onload = function (){
If (localStorageSupported ()){
Alert ('local storage ororted ');
}
};

Function localStorageSupported (){
Try {
Return ('localstore' in window & window ['localstore']! = Null );
}
Catch (e ){}
Return false;
}
Script

In the above two examples, we can intuitively check the features of the browser to ensure that the functions applied on the corresponding browser can work normally.

The advantage of using Modernizr is that you do not need to check such items, and there is a simpler method. Let's start:

When I first heard about the Moderizr project, I thought it was a JS library that allowed some old browsers to support HTML5. In fact, it was not. It mainly used the detection function.

Modernizr can be accessed through the web site http://modernizr.com, the site also provides a Custom Script Function, you can determine what features you need to detect, and accordingly generate the corresponding JS file, this reduces unnecessary JS Code.

After downloading the Modernizr JS file, you can use the script tag to introduce it to the webpage.

The Code is as follows: