HTML and CSS Reference
In-Depth Information
code that detects the browser and its HTML5 support at runtime; then, based on the result, your web page
should either use those features or use some alternative.
You can manually add JavaScript code that performs various tests to detect whether a particular
HTML5 feature is supported by the target browser, but testing and managing such code is too complex
because there are so many things to check for. Luckily, utility libraries are available that make your life
easy. One such popular utility library is Modernizr. Modernizr is an open source JavaScript library that
helps you build HTML5- and CSS3-powered web sites. To use the Modernizr library, you first need to
download the development version or production version from
http://modernizr.com
. U
nless you wish to
debug a script, the production version is recommended due to its compact size. You can also specify which
feature tests you would like to include in the library. The downloaded Modernizr library can then be used
in your web pages for feature detection.
To give you can idea of how Modernizr can be used, let's develop a simple web page—
HelloModernizr.htm
—and test for a few HTML5 features. Listing 1-3 shows the complete HTML markup of
HelloModernizr.htm
.
Listing 1-3.
Detecting Features Using Modernizr
<!DOCTYPE html>
<html>
<head>
<title>Welcome to HTML5</title>
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”modernizr-2.5.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
if (Modernizr.audio) {
$(“#Message”).append(“Your browser supports the HTML5 audio tag. <br/>”);
}
if (Modernizr.video) {
$(“#Message”).append(“Your browser supports the HTML5 video tag. <br/>”);
}
if (Modernizr.canvas) {
$(“#Message”).append(“Your browser supports the HTML5 canvas tag. <br/>”);
}
if (Modernizr.draganddrop) {
$(“#Message”).append(“Your browser supports HTML5 drag-anddrop. <br/>”);
}
});
</script>
</head>
<body>
<h1>Hello HTML5!</h1>
<div id=”Message”></div>
</body>
</html>
As you can see,
HelloModernizr.htm
includes two JavaScript libraries in the head section. The first
<script>
tag refers to a jQuery library, and the other refers to Modernizr. The
<script>
block that follows
tests for four HTML5 features: audio, video, canvas, and drag-and-drop. The feature-detection code runs
when the page is loaded in the browser. Notice the use of the
Modernizr
object, which has various
