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:// , 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
Search WWH ::

Custom Search