HTML and CSS Reference
In-Depth Information
To detect some features, you have to go to much more trouble than the previous approach.
Let's take the
<canvas>
element as an example:
!!
document
.
createElement
(
'canvas'
).
getContext
This code basically creates a dummy
<canvas>
element and calls the
getContext
method on it. The double-negative prefix on this statement will force the result of this ex-
pression to evaluate to either
true
or
false
, in this case informing you of whether or not
the browser supports the
<canvas>
element.
As a final example, let's look at how you'd detect one of the new HTML5 form input ele-
ment types, in this case the
date
type:
var
el = document.createElement(
'input'
);
el
.
setAttribute
(
'type'
,
'date'
);
el
.
type
!==
'text'
;
Pretty ghastly stuff, huh? Of course, you could wrap this in a function to make it reusable,
but writing functions for each and every HTML5 feature would be painstaking. Thankfully,
there's a JavaScript library named Modernizr that does all this for you.
To use Modernizr, grab the minified JavaScript source file for the library from
ht-
tp://www.modernizr.com
,
and include it in your HTML document by adding it to the
<head>
section:
<script src
=
"modernizr-1.7.min.js"
></script>
You'll also need to add a
class
attribute to your document's
<html>
element, with the
value
no-js
, as follows:
<html lang
=
"en"
class
=
"no-js"
>
You can now use Modernizr to detect support for various HTML5 features. Let's see how
you'd use it to detect the four features we detected earlier in this section:
Modernizr
.
applicationcache
//true if offline apps supported
Modernizr
.
localstorage
//true if local storage supported
Modernizr
.
canvas
//true if canvas supported
Modernizr
.
inputtypes
.
date
//true if date input type supported
