Native features of the browser

As stated earlier, one of the strengths of HTML5 is the way it reflects real-world needs, and brings elegant solutions to such needs. Features that don't get used a whole lot by developers (or that don't get wide adoption by browser makers) eventually find their way out of the spec. Likewise, repeated efforts by developers to solve recurring problems eventually cause new features to be suggested, then added to the spec. As new recommendations become accepted as part of the spec, browser makers implement these new features, and the end result is that the browser is extended, and becomes capable of doing what developers had to code by hand.

As an example, let's take a look at placeholder fields. A placeholder is the text inside an input field found in HTML forms, which take the place of a separate label. When the input field is empty, the text inside it describes the data that the field expects (such as a first name, or an e-mail address). Once the user begins to type into the field, that placeholder text disappears, and the actual input from the user replaces it.

While this technique is very intuitive, it takes more physical space to represent, which becomes especially challenging on smaller screen sizes.

A much more dynamic solution, as shown in the following screenshot, is to use a combination of JavaScript and CSS to move the field label inside the field itself:

Before HTML5, this effect took quite a few lines of boilerplate JavaScript code:

<style>
.hint-on { color: #ddd; }
.hint-off { color: #333; }
</style>
<input type="text" name="firstName" value="First Name" class="hint-on"
       onblur="if (this.value == '') {
                 this.className='hint-on';
                 this.value='First Name';
               }"
       onfocus="if (this.value == 'First Name') {
                  this.className='hint-off';
                  this.value='';
                }" />

Of course, there are many ways to achieve this same effect using JavaScript. In HTML5, this same feature, called placeholder, can be achieved with a single line of code, as shown in the following code snippet:

<input type="text" placeholder="Last Name" />

The reason that this second version works is because the attribute placeholder was added to the browser, as well as the logic required to make it work. While this may seem like a nice little trick that the browser has learned, let's take a closer look at some of the main benefits this provides us with:

• You, as the developer, have potentially hundreds fewer lines of code to write and test throughout the course of your entire project, since the browser exposes such a simple alternative

• Development time decreases for two reasons: you have less code to write, and you have less code to test

• Your code will be more portable and reliable, since you don't need to write specific implementations of your code logic for each browser, and you can trust that each browser will implement the feature properly (even if it takes a couple of updates for them to get there)

In other words, instead of putting a lot of your efforts into normalizing your code so it runs the same way in as many browsers as possible, or writing a lot of boilerplate code just to bring your application to the latest accepted standards, you can now invest the majority of your time building unique applications, since the repetitive code is abstracted away by the browser.

One last exciting point about this positive cycle of HTML5 that I'd like to point out is, how, since HTML5 is responsive to common use cases and real world needs, as time goes by we can only expect more and more really neat and useful features being added to the browser natively. Who can even imagine what new features the browser will support natively in the next few years?

As of this book, the following are some native features that modern browsers support (more detail about these features will be given in the following chapters, but this list should give you a good foretaste of what is to come).

Automatic form validation

You tell the browser the exact format that your want user input to be in, and the browser will enforce that format. Any invalid input provided (based on your settings), and the browser will even report back to the user, letting the user know what went wrong.

New input types

Collect data from the user in a variety of formats beyond text, lists, or checkboxes and radio buttons. For values within a given numerical range, you can use a slider input (also known as a range input). You can also take precise input related to dates, colors, telephone numbers, or e-mail addresses. All it takes to specify such restrictions in your input is a single HTML element attribute.

Telephone-friendly hyperlinks

When browsing through text documents, the browser has always been very good at navigating from one document to the next. All it takes to tell the browser where to go next is an anchor tag. Now that smart phones make up nearly half of all Internet usage in some parts of the world, a hyper link can have a different context—such as telling your device to dial a number, for example. With HTML5 you can tell that same anchor tag to treat its link as a phone number to be called, similar to how you currently tell it to treat its resource as an email address.

CSS-based DOM selectors

Unless you have lived under a rock for the past five years or so, you will have heard of, and possibly used the most popular JavaScript library today—jQuery. One of the main reasons that jQuery has become so popular, and has gained such wide acceptance by web developers, is the revolutionary way in which it allows you to access DOM elements. Before jQuery, the three most common ways of accessing DOM elements were as follows:

• document.getElementsByTagName()

• document.getElementsByClassName()

• document.getElementById()

Based on jQuery's solution to this limited way of accessing document nodes, you can now retrieve an element (or a collection of elements) from your document by specifying a CSS selector. Any or all nodes that match such CSS selectors are returned by the new selecting commands:

• document.querySelector("css query goes here");

• document.querySelectorAll("css query goes here");

Text-to-speech

Text-to-speech is probably one of the most exciting and powerful features being added natively to the browser. While your user can simply type some input into an input field, and you can do with that text input what you wish, the browser now gives you the ability to take voice input from your user. Whatever the user literally tells the browser through a microphone, the browser will use its own text analysis algorithms, and give you the equivalent text transcription. By adding a single line of code to your application (and a web-based application, no less), you can now get that much closer to the type of interface only portrayed in movies (or offline, in desktop-based applications).