Get instant access to all courses and online books.

View Plans

Learn HTML5

Sample Lesson 1, Step 4: Can I Really Use HTML5 Right Now?

Perhaps the biggest question about HTML5 right now is, "is it ready for prime time". There's definitely a sense among many developers that HTML5 is interesting, hot even, but perhaps not well enough supported to really think about using it in production work. As we've just seen though, HTML5 is a very diverse area, and while support for some aspects of the specification are non existent and some patchy, other features are either widely supported, or work, or can be made to work in ways which are compatible with all commonly used browsers.

Later in the course we'll focus specifically on the issue of compatibility, but for the moment, let's look browser by browser at support for the major pieces of HTML5. In this article I'll focus on IE6 and up, as well as the latest versions of Safari (4 and 5), Firefox (3.6) and Opera (10.6), as users of these browsers tend to upgrade far more quickly than many IE users.

New structural and semantic markup

Most browser for quite some time have handled gracefully the inclusion of "HTML" elements and attributes they don't recognize. But Internet Explorer until version 8 did not allow styling of these unrecognized elements (though Firefox, Opera and Safari long have.)

This means that in a sense, the new structural and semantic elements of HTML5 (which we cover in the next lesson) aren't compatible with IE 7 or older - still a sizeable if diminishing share of the browser market.

For attributes, rather than elements, things are a bit better. From IE7 on, as well as other modern browsers, you can use CSS attribute selectors to style elements, even unknown elements. For example

section {color: red}

will color the text of the following element red in IE8 and 9, as well as Firefox, Safari and Opera, but not in IE6 or 7

<section>It was a dark and stormy night</section>

But, this CSS

[section] {color: red}  
<section section="true">It was a dark and stormy night</section>

will color the text red in the following element, in IE7 and up, as well as Firefox, Safari and Opera. Strange but true!

Later in the course we'll go into detail as to how we can address these browser shortcomings in various ways.

Video and Audio

At present, as we'll see in Lesson 6, Safari, Firefox and Opera, as well as version 9 of Internet Explorer, support the video and audio elements of HTML5. But there are some complexities.

Firstly, these elements are designed so that we can gracefully fallback to the object element if they aren't supported. Which is good.

The not quite so good bit is even when the video and audio element are supported, because different browsers support different "codecs" natively, we still have to encode our video multiple ways even for browsers which all support the video element! We'll go into the complexities in Lesson 6.

Canvas

Introduced in Safari way back in version 1.3, Canvas is now supported in Firefox, Opera, and IE 9. It is however not supported in versions 8 and older of IE. We'll consider compatibility with the canvas element in our next lesson.

Geolocation

Developers have long been able to roughly determine where a user is located from the IP number of the browser they are using. But with the rise of the mobile web, and devices with support for GPS and compasses, mobile devices can now locate their users within a few metres anywhere on earth, the question arises, would this be useful for developers of web based sites and application? Indeed it is. While the W3C Geolocation API is only moderately well supported on the desktop (Opera 10.6 introduced it, as did Safari 5, while Firefox 3.5 introduced Geo API support, but even the latest preview versions of IE9 don't support it). However, where geolocation is very well supported is in mobile devices. iOS based devices version 3 and up (iPod Touch, iPad and iPhone 3G) support the Geo API, as do Android 2.0 devices, among others.

For browsers which don't support the GeoAPI, there are JavaScript based approaches to looking up the location of a user from the IP address their browser reports.

Offline Support

As we saw, three HTML5 features together help create web applications that work offline as well as they do online.

  • Explicit caching of web based resources using a manifest file
  • Persistent storage of data on the client
  • The ability to determine whether the device is currently online or offline

Together, these give us the ability to create applications that can be effectively installed on the client device, and run even if the device is not connected, as well as easily synchronize with a server if required when the device comes back online.

Caching is supported on all modern web enabled devices, as well as all modern browsers with the exception of IE. However, persistent data storage, and the ability to determine whether a browser is connected are supported on all modern browsers and devices, including IE8 and up.

Web Workers

Web Workers is supported in all modern browsers with the exception of IE.

Web Sockets

Web Sockets are currently supported in Firefox, Safari and Chrome.

Web Forms

HTML5's extensions to forms, which we cover in lesson 4, are not widely supported in current browsers, but several features, such as new input element types like tel , url , email and search can be widely used, because, as extensively documented by Jonathan Snook, all current browsers fall back to a type of text . So, by using types of tel , url , search and so on as applicable, where a plain text field is also an appropriate form control, you'll future proof your forms, as well as adding a little extra sophistication to your site for users of browsers which do currently support these new input element types. For example, Safari on the iPhone will present different keyboard layouts to users depending on whether the input that has focus is of type tel or email .

So, what can I use right now?

The answer really depends on various factors. For some features, there's already widespread support, or as with web forms, graceful fallbacks where a feature isn't supported. For some features, there are JavaScript libraries which provide the missing features for browsers which don't support them. If your specifically tailoring a site or application to for example modern mobile devices, where HTML5 features are widely supported, it's also possible to use many of the features described in this lesson. And when experimenting for your own professional development, and the problems of patchy support aren't an issue, of course then go to town on HTML5. With the momentum of HTML5 adoption, including in IE9, these features will become increasingly mainstream.

Chrome Frame and Google Gears

For some years, Google developed a browser plug-in for most browsers (including IE6 and up) that provided offline storage, geolocation services, background JavaScript execution, and other HTML5-like features for these browsers. Where the plug-in was installed, web developers could use these features in their sites and applications.

Google has discontinued this project in favor of Chrome Frame (as well as of course native HTML5 features in Google Chrome), a plug-in specifically for Internet Explorer (6 and up), that web developers may opt into using. If an HTML document includes the following meta element

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

then, where Chrome Frame is installed, developers can use many more HTML5 features than are supported in IE. This is because for pages where developers opt in, Chrome Frame in fact uses Google Chrome to render the page, and provide a these features. It's an ingenious solution, but not one without critics.

For some developers, including the Google Wave team, Chrome Frame will represent a solution to the problem of lack of support of HTML5 features in particular in older versions of Internet Explorer.

Learn HTML5

Lesson 1, Step 4: Can I Really Use HTML5 Right Now?

Have your say! or become a member now to take part in the discussion

Loading...

Learn HTML5

Lesson 1, Step 4: Can I Really Use HTML5 Right Now?

Lesson 1: What Exactly is HTML5?
7:46
3:07
6:52
Lesson 2: Markup (Part I)
1:49
6:25
9:22
9:56
Lesson 3: Markup (Part II)
1:47
7:15
7:10
8:35
9:48
Lesson 4: ARIA
2:39
9:45
9:08
Lesson 5: Recorded Webinar/Q&A Session
1:15:24
1:13:26
Lesson 6: Native Audio and Video
1:32
6:13
9:38
Lesson 7: Drawing With the Canvas Element
1:32
3:28
9:16
5:41
6:54
7:37
4:22
7:53
Lesson 8: Quality Assurance for HTML5
1:39
9:53
8:27
6:40
5:06
5:36
5:54
7:44
Lesson 9: Bringing it all Together
Lesson 10: Recorded Webinar and Q&A Session
1:08:58
1:21:26
Lesson 11: Bonuses

Get instant access to all courses and online books.

View Plans