- The Goals of HTML5
- Requisites for HTML5 Development
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
Specifically, this book utilizes the JavaScript console in many of its examples, which is used to log messages. This increases the simplicity of the book’s code examples because we can create sample output without bothering with HTML page manipulation. We output to the console with the JavaScript method console.log(someOutput).
Developer tools are typically launched via a Settings menu, or with the command Ctrl+Shift+I, or just F12 depending on the browser. The JavaScript console is found within most developer tools.
The developer console is very flexible, and can also be used to manipulate JavaScript on a page or merely for JavaScript experimentation. Writing directly into the console evaluates the statement and then provides its return value on the next line. Figure 2.1 shows the JavaScript console within the developer tools for Chrome and Firefox, with console-access buttons highlighted and a few commands entered.
)
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
You’ll find the terms shim, shiv, and polyfill peppered throughout HTML5 resources. Where HTML5 is concerned, the three words represent roughly the same concept: a JavaScript library that provides HTML5-like functionality to older browsers, reproducing the native functionality as closely as possible.
In their most generous form, shims and polyfills are drop-in libraries that allow you to use HTML5 features without worrying about proper support for older browsers. The polyfill library detects these unsupporting browsers and attempts to re-create a particular HTML5 feature’s functionality through JavaScript or other means. At the least, these libraries ensure that new HTML content is styled correctly on older browsers.
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:
- caniuse.com
- html5please.com
- mobilehtml5.org
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.
There are many other valid ways to test for canvas support (or most HTML5 features for that matter), and instead of bothering to find a working method for each, it is sometimes easier to use a library. The most popular feature detection library is Modernizr (modernizr.com), which can quickly detect all HTML5 and CSS3 (Cascading Style Sheets) features and enable you to respond by executing some appropriate JavaScript, or even conditionally loading different JavaScript and CSS files based on a feature’s support.