In the second, summary part of the basic course HTML5, we look closely at the next great elements of the language.
HTML5 short course: the Modernizr library
At the beginning we add yourself to facilitate work in the form of the Modernizr library.
This is a JavaScript library that detects the availability of HTML5 and CSS3 features in our browser.
We can download the Modernizr from official website, where is also a tool allowing us to choose the test only for those features, that interests us. Ad by the way we can see a full list of features, that Modernizr can detect.
We may also use the CDN, such as cdnjs.com.
So let’s add the library to our project:
<script src="modernizr.js" type="text/javascript"></script>
And add the no-js class to our main markup (html):
<html class="no-js"> …
Modernizr runs automatically, so you can immediately use it, for example, to check whether the browser supports the Canvas element:
if (Modernizr.canvas) {
// let's draw!
} else {
// no native canvas support available
}
As we can see, the tests performed by Modernizr allows not only for instant detect the availability of the required functionality, but also the implementation of an alternative for browsers without support for desired feature.
Actions that the above code executes, we can also write manually in JavaScript:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
But I prefer the Modernizr’s way.
Please note that Modernizr is not a library that adds missing functionality to the browser.
There is some kind of such solution — the html5shiv library, which may add support for some HTML5 elements in IE9+.
