HTML and CSS Reference
In-Depth Information
n
Note
Not all browsers use the
title
parameter of the
pushState()
method even if it's mentioned. For
example, the history dialog shown in Figure 6-5 shows the title for all the URLs as “Slide Show - Hammer” even if
their location is different. Future versions of browsers may use this parameter.
Browser Support
Almost all of the leading browsers except Internet Explorer 9 support the HTML5 History API. As with any
other features of HTML5, it's always a good practice to check whether a browser supports the History API
using Modernizr. The Slide Show application includes that check, as shown in Listing 6-11.
Listing 6-11.
Checking Support for the History API Using Modernizr
if (!Modernizr.history) {
alert("This browser doesn't support HTML5 History API!");
}
If a browser doesn't support the HTML5 History API, your application may still work, but it doesn't add
any entries in the history; neither does it change the address bar. If you wish to provide some sort of
fallback, you can resort to either of these two options:
• Use full-page refresh as you did in the irst non-Ajax version of the Slide Show
application.
• Use the hash-fragmented URL technique discussed earlier.
Custom Data Attributes
HTML markup elements use attributes to specify configuration information. For example, the
height
and
width
attributes of the
<canvas>
element govern the height and width of the canvas when displayed in the
browser. Most of the attributes of HTML elements affect the user interface or visual display of the element
under consideration.
While developing web applications, developers often find it necessary to emit metadata about an
element to the client browser. Such metadata doesn't affect the display of the element directly.
Nevertheless, the metadata holds pieces of information relating to that element.
Consider an example where an HTML form is to be validated using custom JavaScript code. When the
JavaScript code validates the form fields, it's supposed to display validation errors if any of the fields hold
invalid values. Often, the error message text is directly embedded in the JavaScript code. But what if the
error message text is to be changed after the deployment? Embedding the error message text directly in the
script calls for editing the script. This in turn amounts to changing the application's code-base. In such
situations, it's helpful if the error message text is stored separately from the web pages (say, in a database
table). At runtime, the error messages can be retrieved from the database and emitted to the client. These
emitted messages form the metadata of the HTML elements. If any change is required in the error
messages, you change the database entries, and the application begins using the new values from the next
run.
Prior to HTML5, there wasn't a standard to deal with such metadata information. HTML5 introduces
custom data attributes that can be used to define metadata about elements.
