HTML and CSS Reference
In-Depth Information
This topic focuses on the rules for dynamic animation, providing different techniques to change the image
description, which results in realistic motion. In this chapter, you see how to structure the initial description,
how to apply those rules on each frame, and how to tie the program together. You will create plenty of
working examples as you progress.
An introduction to HTML5
In this topic, we create HTML5 documents that are viewed in a web browser. HTML5 is the latest iteration
of HTML, Hypertext Markup Language, a language for structuring and presenting content for the World
Wide Web. HTML elements are the building blocks of web pages. At the time of writing, the HTML5
specification is still in development, but a number of features are considered stable and ready to use, such
as the canvas element. HTML5 improves on HTML4, which was standardized in 1997, by adding new
elements and support for multimedia content, such as audio and video. Because these new, semantically
meaningful elements expose properties and controls that are accessible in the document, you can
manipulate them programmatically using JavaScript, giving you a powerful way to control and create
media.
HTML5 is a
collection
of individual features. When assessing a particular browser's HTML5 support, this is
not an all-or-nothing classification; rather, you test if a browser supports a specific feature of the defined
specification. Different browsers have different support for different features. This can make it difficult to
target individual HTML5 elements without knowing how a user will view the document. As browsers
continue to improve, cross-platform feature detection becomes less of a concern, but for now, you should
always test the user's web browser for the HTML5 features you target and provide a backup solution if it
fails—even if it's just a politely worded message instructing your user to upgrade his browser.
Canvas support
The good news, at least for this topic, is that all the major browser vendors have implemented support for
the canvas element. This means that you can be relatively confident that your user can see the animation
you create, provided she has upgraded to a recent version of her browser. Games and animations provide
an excellent way to push users into upgrading their browsers, because, after decades of video games,
most people understand that cutting-edge graphics require the latest hardware and software. At least it's
easier to convince someone to upgrade her browser rather than buy a brand new gaming console.
In case the canvas element is not supported in a web browser, in your HTML document, you can provide
backup content by including it within the canvas tags:
<canvas width="400" height="400">
<p>This browser does not support the<code>canvas</code> element.</p>
</canvas>
The warning message appears only if the browser does not recognize the canvas tag. If the browser does
support it, then it renders the canvas element and ignores the nested
<p>
element.
To programmatically test whether the browser supports the canvas element, you can add the following
JavaScript to your document:
