Java Reference
In-Depth Information
For example, it was mentioned earlier that although IE8 supports native drag and drop, it does
not support the
draggable
attribute/property. You can extend Modernizr to test for this specific
functionality like this:
Modernizr.addTest("draggable", function(){
var span = document.createElement("span");
return typeof span.draggable != "undefined"
});
This code adds a new test called
"draggable"
. Its function creates an arbitrary
<span/>
element
and checks if it has a
draggable
property. In modern browsers, the
draggable
property defaults to
false
, but it is
undefined
in IE8. Therefore, when you use the test like this:
if (!Modernizr.draggable) {
// code for IE8
}
you can run code for browsers that do not support the
draggable
attribute/property.
Sometimes, however, you don't want to use an
if
statement to run code for a specific browser
(or a set of browsers). Instead, wouldn't it be nice if you could load an external JavaScript file for
browsers that passed or failed a certain test? Modernizr can do that!
loading resources
Modernizr has an optional method called
load()
(you can omit it from your custom build), and it's
used to load external JavaScript and CSS files based on the result of a test.
The
load()
method's basic usage is simple; you pass it an object that describes the test and resources
you want to load. For example:
Modernizr.load({
test: Modernizr.geolocation,
nope: "geo-polyfill.js",
yep: "geo.js"
});
This code calls
Modernizr.load()
and passes an object that has
test
,
nope
, and
yep
as properties
(we'll call this a
yepnope
object). The
test
property contains the result of the test. If it passes,
Modernizr loads the file assigned to the
yep
property (
ge o.js
in this example). But if it fails, the file
assigned to the
nope
property (
geo‐polyfill.js
) is loaded instead.
Note
A polyfill is a third‐party JavaScript component that replicates the
standard API for older browsers.
The
yep
and
nope
properties are optional, so you can load only one resource if you need to. For
example, the following code loads a JavaScript file only for browsers that do not support the
draggable
attribute/property:
