Other JavaScript Libraries - Beginning JavaScript - page 508

Modernizr's download experience varies depending on the version you want to download. The
development version includes most tests by default (you can still customize the build if that's your thing),
but the download page also has an easy‐to‐use Download button (as shown in Figure 17-1). Simply
clicking the button downloads Modernizr to your computer, and you can save it wherever you need to.
The production version is just as simple to download. Most features are excluded by default, forcing
you to pick the features that you need for your page or application. This is actually a good move by
the Modernizr folks because you want a customized (and thus optimized) build for your specific needs.
After you select your desired features and click the Generate button, the Download button appears.
Note For the sake of simplicity, you can find the full production version
(v2.8.3) in the code download for this chapter. You can also download it at
http://beginningjs.com/modernizr.js .
Modernizr's developers suggest that, for best performance, you reference Modernizr's <script/>
element inside the <head/> and after your style sheet references.
modernizr's api
Modernizer has a straightforward API that revolves around a single object called Modernizr . It has
a set of properties and methods that you use to determine if a browser supports a particular feature.
For example, you can determine if a browser supports the geolocation API from Chapter 8 like this:
if (Modernizr.geolocation) {
// use geolocation
}
At first glance, it looks like you haven't gained much by using Modernizr because in Chapter 8, you
learned that you can do the same thing with the navigator object, like this:
if (navigator.geolocation) {
// use geolocation
}
But remember that Modernizr is a library for detecting many features, even those that require a bit
more involvement to detect. For example, the code for determining support for native drag and drop
is more complex. The elements in browsers that support native drag and drop have a draggable
attribute, or they support events like dragstart and drop . That means the code needed to check for
drag and drop support could look like this:
var el = document.createElement("span");
if (typeof el.draggable != "undefined" ││
(typeof el.ondragstart != "undefined" &&
typeof el.ondrop != "undefined")) {
// use native drag and drop
}