HTML and CSS Reference
In-Depth Information
options you may want to consider if you'd like to include Canvas apps in your EPUB,
but want to mitigate the incompatibility with other EPUB readers (e.g., Nook, Sony
Reader, Adobe Digital Editions):
• Include
fallback content
within your
<canvas>
elements that will be displayed if the
user's ereader doesn't have Canvas support (see the beginning of this chapter for
more details). This way, while readers won't be able to use the app, you can display
text, images, etc., that can potentially convey some of the same information that
would have been displayed on the Canvas.
• Instead of (or in addition to) just embedding your Canvas apps directly in the
EPUB, consider hosting them on the Web and linking to them from your EPUB,
so that readers can access them from a traditional Desktop or mobile web browser.
Many modern hardware ereaders (again, iBooks, but also the Nook Color) have
built-in web browsers, so even if the ereader software itself doesn't support
can
vas
, the web browser may. Additionally, readers viewing your EPUB on a desktop/
laptop machine (say, in Adobe Digital Editions) can click on your link and run the
Canvas app in Firefox or Chrome. The one downside of this approach is that read-
ers will obviously still need Internet access in order to access the app.
Testing for HTML5 Compatibility with Modernizr
You may have noticed that the preceding <canvas> examples in this chapter included
a script called
modernizr-1.6.min.js
in the HTML:
<script src="modernizr-1.6.min.js" type="text/javascript"></script>
Modernizr
is a free JavaScript library that is widely used across the Web to test browser
compatibility with HTML5 and CSS3 features. Specifically, it provides the following
functions for testing the features covered in this topic:
Modernizr.canvas
Tests for HTML5 Canvas support
Modernizr.geolocation
Tests for Geolocation API support
Modernizr.audio
Tests for HTML5 audio support. It can also test specifically for support
for
.m4a
,
.mp3
,
.ogg
, and
.wav
file formats.
Modernizr.video
Tests for HTML5 video support. It can also test specifically for support for
H.
264
.mp4
,
.ogg
, and
.webm
file formats.
It's good practice to use a library like Modernizr to do compatibility testing for HTML5
features, so that you can provide fallbacks in your JavaScript code in the event the user's
browser does not have support for the requisite HTML5 elements. However, note that
many ereaders do not supoort scripting via JavaScript, so when adding HTML5 to
ebook content, don't rely solely on Modernizr to provide your fallbacks. Your best bet
