HTML5 shoot-out: How Chrome, Safari, Firefox, IE, and Opera measure up

Chrome and Opera lead in compliance with the latest Web features, but the differences among browsers may be smaller than they appear

By Peter Wayner InfoWorld | Apr 29, 2015

Has it really been four years since the buzzword “HTML5” came screaming across the sky and gave us every reason to believe in the power of JavaScript in the browser? Time flies when you're writing code.

HTML5 is back on the tips of our tongues because the W3C committee finally decided it's time to stop fiddling with the HTML 5.0 spec and move on to HTML 5.1. This marks a historic occasion because the HTML4 document was finalized in 1997. Time drags when you're working on a committee.

What's the world been doing? Certainly not waiting for a final draft. Websites that take advantage of the standards in HTML5 are everywhere. The browsers support many of the HTML5 features, and they're getting better with each rev. The differences between the websites and the native apps are smaller than ever, and complex, interactive websites that behave like native apps are more feasible than ever.

Now is a good time to revisit the browsers and see how they're adopting the recommendations of the HTML5 standards committee. The new form elements, tags, attributes, and background features in the proposal are no good to the world if they're merely ideas on virtual paper. The browsers are where the dreams of the committee turn into the reality that all of us experience when we write code or visit a website.

The good news is that the browsers are converging on the standard. The scores on the automated checklist, HTML5Test.com, are getting closer and closer to perfect, although there's still a big difference between some browsers.

It's worth noting that HTML5Test boils all of the standards compliance down to one number (from 0 to 555) that's simple to read, easy to compare, and devoid of all nuance. The automated test checks only whether a feature is supported, by creating some DOM objects. It can't tell whether the feature is implemented correctly, elegantly, or without horrible bugs. To make matters worse, everyone will want to argue with the number of points given (or not given) to particular features.

While a single number is hard to ignore, the real answers lie a bit deeper. Spending a few minutes scanning the lists reveals the priorities of the development teams steering each browser. Some of the new features that aren't yet supported may not feel like a big deal. Google's Chrome supports custom scheme handlers but not custom content handlers. Firefox doesn't support some of the newer input fields for forms like time, month, or week. There are at least a dozen or so omissions on each platform, and few of them make much difference in any user’s experience now. But that’s now. Compliance is about building a firm foundation for the future.

Browser politics

Some of these differences stem from deep political and financial battles hiding behind the scenes. Firefox and Chrome support the WebM and Ogg Theora video codecs, but not MPEG-4. Safari supports MPEG-4 but not WebM or Ogg Theora. At least they all agree to support H.264. These codecs aren't officially part of HTML5, but they are such a big part of the modern Web that progress on them may be more important to many Web developers than all of the other features.

Other items in the test aren't even part of the official HTML5 draft because they're part of another specification that may have been spun off from the official HTML5 spec. It's often hard for Web developers, server programmers, and especially users to draw a line between what's HTML5 and what's a new or better feature. Some of the most attractive features like Web Storage and Web Workers aren't under the HTML5 umbrella, though they're also being nurtured by the W3C. They may have an even bigger impact.

The core of the HTML5 spec finalizes the addition of a number of new tags designed to indicate the role played by the text inside the tag. They specify areas like sections, asides, footers, and headers. In the old days, we would mark them up with tags that specified the typography, like

. Now they'll be marked up with their role, so they can be given their own CSS styles, and the browser will lay out the elements accordingly. The trend to separate the text and images from their arrangement and presentation on the page continues.


There are fascinating debates behind these changes, but they’ll be important only to the folks who worry about the appearance of Web pages. There are, for instance, some who want to stamp out the use of tables for layout and others who merely want to discourage it. It may be possible to intuit how a table tag is being used by reading the attributes. Adding a border or giving the column a header means it's probably holding tabular data. Leaving the border off means it could be a layout.

Using the elements in the “wrong way” can have consequences beyond offending self-appointed guardians of the Web. Clever repurposing of tags (like table) also breaks other systems. The HTML5 team is devoting more resources to making it easier for the blind and disabled to use the Web. Using table tags for anything other than tables of data confuses the screen readers and other mechanisms. Now there is a new class of attributes starting with the acronym ARIA (Accessible Rich Internet Applications) that provide alternative descriptions of the data inside. In general, the push to separate the message from the presentation is helping make this much easier.

From Web pages to Web apps

A good deal of the recent work has been in the extras that are turning static pages into full dynamic applications. The specs for Web Storage, WebSockets, and Web Workers have grown much fatter as the browser builders figure out what's working and what's not. These specs are the ones making it possible for programmers to create full-featured suites of software like Google Docs. Saving data locally and allowing background communication and threading is essential for working with nontrivial data sets.

The changes are largely focused on small details that may not even be noticed by many developers. The spec for Web Workers, for instance, now declares that the worker officially begins when a separate parallel execution environment is created. This is only important when the workers are timed, so they won’t impact the vast majority of more basic workers.

There are dozens of small changes like this in Web Storage, as well as debates around them that may not be finished. Some feel that forcing the different threads to flip a mutex bit to access the Web Storage adds too much overhead. Others believe that data integrity is important because people often browse the same websites in multiple tabs.

These are the kind of tidbits that the W3C debates, but programmers might not care. If they're only storing a few thousand items and the performance is OK, many of the details in these specs aren't important to them. But the browser makers must sweat them all.

Because many of the details are left uncertain, the browser creators often make different decisions. The Web Storage spec says browsers should “limit the total amount of space allowed for storage areas” and suggests that 5MB might be a good limit. These are details that the browsers and the users will converge upon in the future. Meanwhile, the implementations differ.

One of the most contentious areas may be in the media processing. The Web browser is becoming the dominant way we access video and the HTML spec team has clearly set their minds on conquering the living room. The Encrypted Media Extensions spec includes a sophisticated mechanism for juggling the video feed and the keys, so only the properly licensed browsers will be able to display the imagery. Chrome, Opera, and Safari support these media extensions; Firefox and Internet Explorer don't.

There is plenty of other work aimed at creating moving parts. One new draft, Web Video Text Tracks, explores a standard mechanism for synchronizing video with other parts of a website. It is mainly aimed at captions, but there's no reason it won't find more applications creating multimedia extravaganzas. I can see words and graphs and imagery flying everywhere; all of the browsers support it.

Web futures

While it's natural to think of the crowning of the HTML5 spec as the end of a long process, it's better to see it as the beginning of the next generation. Some of the ideas were bumped from the 5.0 spec because there wasn’t enough “implementation experience.” In other words, the features haven’t been out long enough for everyone to know whether they’re doing what we want.

A quick skim of the HTML 5.1 spec, already in draft form, includes features like the accesskey attribute for adding keyboard equivalents to mouse clicks. There is more support across all of the browsers for the HTML Editing APIs that make every Web page potentially editable and the entire Web potentially one big Wiki.

Even bigger changes may be afoot, as some would prefer HTML become more like XML. It's not merely an attempt to make everyone close all of those open tags -- which obviously bugs some developers and rattles the parser teams. Some contributors to the HTML5 specification are already talking about allowing the next version to be “hackable.” That is, they want a spec that would allow us to define our own tags and our own mechanism for handling the tags after they’re parsed.

This has the potential to make the markup much more efficient. Anyone who has hit the View Source button lately knows that many HTML files may be 50 to 60 percent
and tags, each with several different classes attached. Debugging the CSS style files is growing increasingly difficult. One way to clean this up is with a fully extensible tag system.

All of these decisions lie in the future. The 5.0 milestone is a big one, but it’s only a pause in the evolution of a standard that has defined how we present and interact with information.

Enough generalization -- it's time to dig into the browsers.

Browser No. 1: Google Chrome

Chrome has the highest score on the HTML5Test -- 523 for Chrome 42-- and that says much about Google's commitment to driving the HTML5 spec and producing one of the leading browsers. There are only a few check boxes left for the programming team to mark and a few points for them to earn.

The omissions are scattered throughout the chart, and there's no easy way to summarize with a simple phrase. You'll find a missing markup element here and an unimplemented graphics method there. All in all, Chrome is a dream for anyone committed to a broad set of tools for building user interfaces. If you want to use all of the new markups or form elements, Chrome is your best choice. There are very few gaps in the list.

Some of the bigger omissions are under the hood. There are no hooks in the JavaScript engine that fire separate events when scripts start and stop executing. And there is no easy way to use scope to control how the CSS styles affect the page. Nor are there opportunities to use your code to register a function that processes all data of a particular MIME type or URL scheme, the so-called custom content handlers.

All three, incidentally, are ideas that were implemented in Firefox long ago. They haven't caught on with the team at Google.

Another area that might bring frustration is the support for codecs and media formats. MPEG-4, for instance, works with iOS browsers but not with Chrome. Both Apple and Microsoft support audio track selection, and Apple supports video track selection, but Chrome won't let you monkey around with these.

In all, Chrome is a great browser for anyone who wants to start using the extra features that are part of the new standard.

Browser No. 2: Opera

At this writing, Opera is currently in second place in the HTML5Test, but by only four points, with 519 for Opera 29. Like Chrome, Opera offers broad support for the new markup and form elements, so it’s as good a platform as Chrome for anyone who wants to experiment with them.

By the same token, Opera also skips custom content handlers, scoped style elements, and script execution events. But then, so does every other browser besides Firefox.

The biggest differences lie in the codecs, where Opera fails to support the MPEG-4 and H.264 video formats. To complicate matters, it also lacks support for AAC and MP3, two audio formats that have been around for some time. Thus, getting your multimedia content to work with Opera can be a bit tricky. Opera is almost certainly hemmed in by patent licensing costs, and the company probably chose to ignore the heavy licensing costs. Opera certainly supports Ogg Vorbis, Ogg Theora, and WebM, which are good enough, if not directly compatible.

Along with Internet Explorer and Chrome, Opera is leading the way with “pointer events,” a generalization of the different input models. These aim to make it simpler to support mice, touchscreens, and styluses by offering the programmer a single, simpler event model that harmonizes them.

In all, Opera is an impressive browser that doesn't get as much attention as it should. It is rivaled only by Chrome in its broad support of modern Web features.

Browser No. 3: Mozilla Firefox

Numerically, Firefox looks like it's a bit behind the two leaders. It scores 449 on HTML5Test, for Firefox 37, but this fact is affected heavily by the weights that the test gives to the various features. Firefox loses many points on some areas where it lags and gains fewer points on the areas it leads.

Many of the points are lost, for instance, because Firefox doesn't implement many of the new input fields and interactive elements. If you want to simply add one form element to collect date or time values, Firefox won't help you. For these omissions, it loses 26 points, but it's not clear whether any programmer really suffers. There are already elaborate JavaScript libraries for accepting time data, and they've been designed to be cross-browser compatible. Many of them are also highly stylized and better-looking than the generic tools. Thus, many programmers choose these over the built-in support.

The scoring also doesn't reward Firefox for taking the lead. Events that fire when a script is about to execute are useful for juggling loads, but support for these script execution events gains Firefox only one point. Adding scope to the style sheets is useful for integrating several style sheets, but it’s worth only two points in the eyes of the HTML5Test creator.

Firefox no longer wins any points for implementing microdata markup, the extra tags that make it simpler to identify and flag some common data types in Web pages. Unloved by the W3C and all the other browsers, microdata is supported only in Firefox at this point.

In codecs, Firefox offers broad support, but avoids MPEG-4, putting it in the same camp as Chrome and Opera. It supports Ogg, WebM, and H.264, which are more than sufficient.

Are these differences important? It all depends upon how you weigh the features personally. If you like all of the new form elements and must have them, Firefox isn't for you and your project. But in many ways, Firefox offers the same level of compliance as the browsers with higher scores -- if you don't care about things like the new time input form fields.

Browser No. 4: Apple Safari

On the HTML5Test, Safari 8 earns 396 points on the HTML5Test, which makes it look further behind than it may be in practice. Like Firefox, Safari loses a great number of points by failing to implement all of the possible form and markup elements. There are no options to make an input field to collect time or color and no support for the standard menu elements.

Game developers, though, may be more put out. There's no support for tracking the orientation or motion of the device, or for gamepad control or the more general pointer events. If you're going to create items for Safari, it may be best to stick with traditional content and avoid elements that are too interactive. Leave those for the App Store.

In the world of codecs, Apple takes a different path than Chrome and Firefox. Safari will display MPEG-4 and H.264 video but reject WebM and Ogg Theora. The good news is that video and audio tracks can be controlled through JavaScript.

There are a handful of other places Safari falls short of the more complete feature sets in Chrome, Opera, and Firefox. Whereas these browsers support peer-to-peer communications via WebRTC, Apple offers no support yet, keeping company with Internet Explorer. Nor does Safari support service workers for background processing, custom scheme or content handlers, or custom search providers.

These omissions aren't debilitating by any means. Apple still offers broad support for the standard and delivers many of the most interesting features.

Browser No. 5: Microsoft Internet Explorer

Version 11 of Microsoft's once indomitable Internet Explorer has the lowest score on the HTML5Test -- a mere 348-- but this shouldn't be much of a surprise. The standards movement was always driven by the hope to encourage competition and dislodge Microsoft from its control of the Net. It's working the way that some people clearly hoped it would.

IE lost points throughout the chart and can't even muster enough to lead in one area. In fact, the only area where it beats any of the other major browsers is in Web applications, where its support for custom search providers narrowly edges Safari. The rest of the time it's bringing up the rear.

While it's certainly fair to use the lower score to judge Internet Explorer's devotion to implementing every last bit of the HTML5 standard, it's not a good indicator of how smoothly IE will run HTML5 code or perform on a day-to-day basis. A quick skim of the results shows that many of the points are lost for features that are new and far from essential. IE lost points, for instance, for not supporting CSS selectors like “in-range,” “out-of-range,” and “read-only.” It also lacks support for a number of new input fields for time.

There are dozens of places where IE is missing support for little features or additions but none of them seem like showstoppers to me. Sure, they'll annoy some programmer who wants to use them, but they won't stop the browser from working well enough.

There are a few bigger omissions. Microsoft avoids MPEG-4, Ogg, and WebM video, as well as PCM, Ogg, and WebM audio. That leaves MP3 audio, H.264 video, and Flash video as the only supported standards that stretch across the Web. IE does, however, allow JavaScript to control the audio tracks.

It's worth noting that Microsoft clearly understands the value of standards compliance, and it's making rapid gains. While the Internet Explorer version number odometer doesn't spin as quickly as the other browsers, it was only a short time ago that IE9 eked out a mere 113 points. And the pace seems to be quickening with Project Spartan, the new Web browser that comes with the Windows 10 preview.

The latest version of Spartan (which arrived in Windows build 10061) earns 390 on the HTML5Test, well ahead of IE 11 and just shy of Safari. The biggest improvements over IE -- support for device orientation, device motion, gamepad control, Web audio, DRM, media extensions, and responsive image display -- would seem to indicate that gaming, entertainment, and mobile devices are at the top of Microsoft’s priority list.

The HTML5Test is a very precise metric, but it’s important to remember that it’s built to assess whether the browsers implement the newest and most experimental features accepted by the HTML5 committees. It doesn’t give out points for doing a good job of laying out tables or rendering pages quickly. It’s a big checklist of features, not a measure of browser quality.

The results also provide a good indication of the corporate priorities. Chrome, not surprisingly, offers great support for the kind of full-featured, applicationlike websites that Google delivers. This also makes it simpler to provide more features on Google's hardware platform, the Chromebook. The company gains little from the part of the stack called an “operating system,” so it’s not surprising that it wants the part known as the “browser” to be more capable.

Apple, for its part, doesn't seem as interested in supporting gamelike behavior in the browser, perhaps because it makes so much money from the App Store and doesn't want to undermine it.

Many of the features where the browsers are at odds don't matter as much to developers. If you're building a Web application with plenty of DOM elements that generate AJAX calls and react to the server’s response, well, all of the browsers do a good job of supporting this. They all offer the same core features, and it doesn't matter much whether they implement the latest form element.

In this sense, the HTML5Test score speaks more about the future than the present. While the HTML 5.0 standard is now fixed and the committee has turned its attention to the next set of ideas, the browser makers need to finish implementing the standard. As they do, more and more of the Web developers will see that the new features are available and ready for use. Only then will the users start to see the advantages.

The good news is that the browser makers are converging quickly and many of the features have been embraced widely enough for Web developers to start using them. The committee has done its work. Now it's our turn.



Comments

Popular posts from this blog

How Amazon’s Bottomless Appetite Became Corporate America’s Nightmare

Why magazine mogul Tina Brown is ‘angry and upset’ at Google and Facebook

How a confused, defensive social media giant steered itself into a disaster, and how Mark Zuckerberg is trying to fix it all