HTML5 and CSS3 characteristics detection

HTML5 and CSS3 are becoming the necessary skills for Web front-end development, and checking different browsers for HTML5 and CSS3 support in the development process has become a very disturbing thing.

For example, we want to check whether a browser supports canvas elements:

function Sup_canvas () {
var elem = document.createelement (' canvas ');
Return!! (Elem.getcontext && elem.getcontext (' 2d '));

Whether to support WebGL:

function Sup_webgl () {return
!! Window. Webglrenderingcontext;
};

There are a lot of HTML5 and CSS3 other properties ... and thankfully we found the Modernizr open source JavaScript library

Modernizr is an MIT-based open source JavaScript library that detects whether browsers support HTML5 and CSS3 features. Modernizr function is very simple, that is, using JS to detect the browser's characteristics of the HTML5/CSS3 support, support a property, on the page on the label to add a corresponding class, do not support the words added a no-prefix class, for example, If the browser that detects supports the video tag, Modernizr adds the video class to the label, otherwise the No-video class is added.

The latest MODERNIZR is 2.0.6 version, if you download the development (development) version, to provide us with all the content, if you want to download the production version of Modernizr, we will find that we can according to their own needs to be customized. On its download page, we select the HTML and CSS features we want, and then generate a JavaScript file. This will greatly reduce redundant code, reduce unnecessary detection, for the Web front-end this very important user experience place, the performance is 1.1 point pressure out.

The use of Modernizr is also very simple, as long as and must be applied in the tag, no need to invoke modernizr_init () and so on initialization methods. Modernizr must be placed in, preferably after the CSS declaration, because HTML5 Shiv (to enable HTML elements in IE) must be executed before, and to use the Modernizr added class, you need to block Fouc. Another point is the No-js class in the HTML declaration. It sets a default state, and if the page disables JavaScript we'll know.

With the debugging tools we see a lot of style classes added to the HTML tags, from which we can fully see the browsers you use for HTML5 and CSS3 support, starting with "no-", which is not supported by this browser:

Knowing the support for these features we can use the CSS selector to do some performance differences, for example, if the label is not supported, then the test class text is red.
. Canvas. Test {
Color:blue;
}

. Canvas. Test {
color:red;
}

Similarly, we can also use these features in JavaScript to detect the results of the code:

if (Modernizr.canvas) {
//start drawing!

}else{
alert ("fuck!");
}

Modernizr 2 also provides a load mechanism to facilitate code management, such as:

Modernizr.load ({
test:modernizr.canvas,//checks to see if the tag and corresponding attributes are supported
yep: ' canvas.js ',//if the support tag and the corresponding properties then load Canvas.js,
nope: ' no-canvas.js '//if the tag and corresponding attributes are not supported then load No-canvas.js,
});

If you are directly using the development version of Modernizr, you will find that there is no modernizr.load at all because it is published as a separate file: Yepnope.js. And in the production version, we chose to include it in the Modernizr.