• Scripts should not be able to start drag-and-drop actions.
The DataTransfer object is part of the drag-and-drop specification. The DataTransfer object contains
the files that have been selected. The files are made available to us through the FileReader window
interface, which is a part of the File API W3C Working Draft. In our file-upload code, we are using
the .size and .name properties of the files, which are fairly self-explanatory. Some of the other proper-
ties that are available are type, mozSlice, mozFullPath, fileSize, webkitRelativePath, fileName, and
webkitSlice. The properties that have the “moz” prefix are available on Firefox. The properties that
have the “webkit” prefix are available on Chrome. I expect that other browser vendors have created
their own properties as well.
Along Came Polyfills (and Modernizr and Script
There is an unfortunate downside to HTML5 and all its new and cool features. This downside is that
not every web browser supports it! For each of the latest HTML5-compliant copies of IE10, Firefox,
Chrome, Safari, mobile Safari on iOS, mobile Android browser, and others that I have crammed onto
my systems, there are hundreds of my clients’ end users who run IE7 or IE8 and access my applica-
tions that have been running since 2003 or earlier (yes, I have a web app that has been running for
more than eight years). The problem is, then, how can the application that I am authoring provide all
these new and cool HTML5 features to users that have HTML5-capable web browsers while at the
same time not alienating those who are using your applications over older browsers like IE7 running
on Windows XP? Into this gap steps the polyfill.
Strictly speaking, a polyfill is a piece of software, or shim, that offers some fallback mechanism to
example, a geolocation polyfill could be used to provide HTML5 standard geolocation for an older
BlackBerry device that doesn’t provide the native HTML5 geolocation support.
Now, I am sure that your next question is, “How does my program know that the browser supports an
HTML5 feature?” You’re probably thinking that you will need to check the browser along with its ver-
sion and then code an application along those lines. This is referred to as browser detection . We’ve
all probably done this in our development lives and understand what a nightmare this is from a sup-
port standpoint. We would rather be able to test to determine whether a browser supports a given
feature, referred to as feature detection. If the browser supports the feature, then the native feature will
be used. If the browser does not support a given feature natively, a polyfill can be used to provide the
-- jQuery, for example, so we don’t need to worry about things there. So how can we integrate feature
detection into our code?
Chapter 9: Start Using HTML5 in Your Web Apps—Today!