Requisites for HTML5 Development
This section covers a few important considerations for developing HTML5 web apps. These represent nothing new to a seasoned web developer but are otherwise important for understanding the rest of this book.
Modern Browser Developer Tools
Browser developer tools have matured rapidly over the past six years. For both developers and designers, it is strongly recommended that you familiarize yourself with them, as they are referenced occasionally in this book.
FIGURE 2.1. Chrome and Firefox with their developer tools open, with the console showing. Buttons to show/hide the console are indicated with arrows.
This book also mentions newer features of developer tools that specifically aid in debugging some HTML5 features, like local storage and web workers. These are referenced and explained in their respective chapters.
The importance of learning browsers’ developer tools cannot be stressed enough. Familiarizing yourself with them is one of the most important job skills of web developers today. Chrome’s developer tools are top notch, and Firefox has very recently (March 2013) debuted a huge amount of useful new functionality to its toolset.
HTML5 Fallbacks: Shims, Shivs, and Polyfills
For a few years, the lack of support in older browsers stalled implementation of HTML5 features. Today, barring impossible-to-reproduce functionality in some features, HTML5 features can safely be used without fear of leaving older browsers in the dust.
Online, you will be able to find a good deal of these polyfill libraries and very good lists of such libraries, such as the one in the Modernizr project: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (the project itself is mentioned later in this chapter). Chapter 3 also contains a section on some of the most popular HTML5 polyfill libraries.
Feature Support and Detection
Not every HTML5 feature can be reasonably supported with a polyfill. For some features, such as complex canvas applications, it is necessary to support a different kind of fallback. In the case of canvas, that usually entails displaying an image instead of a dynamic animation or a “sorry, please consider upgrading your browser” message instead of interactive content.
How Do I Know What Features Are Supported?
Before you use any particular HTML5 feature, it’s a good idea to look at a website of compatibility tables to see which browser versions currently support the feature. There are several of these websites, and the most popular ones are as follows:
Figure 2.2 shows a typical compatibility table from caniuse.com. You can see that all versions of Internet Explorer and many mobile browsers do not support WebGL, the 3D specification for HTML5 canvas (2D canvas is much more widely supported).
FIGURE 2.2.Compatibility table from caniuse.com showing WebGL support on major browser versions.
Always Use Feature Detection
Sometimes you’ll want to use a feature even if some browsers do not support it and there is no reasonable fallback. Instead of attempting to detect particular unsupporting browsers, it is always better to detect the existence of features.
For instance, the HTML5 canvas element is not supported on Internet Explorer 8 or below. To test for its support, you could create a canvas element and then check for one of the methods that you would expect to exist:
var supportsCanvas = document.createElement('canvas').getContext != undefined;
The variable supportsCanvas will be true in Internet Explorer 9 and false in Internet Explorer 8. Using document.createElement('canvas') alone is not enough because it will successfully create an element of type HTMLUnknownElement. Instead, you check to see if the getContext method exists on the new element.