The Challenge with HTML5 – In Pictures

I love working with Web technologies and am looking forward to the new functionality that HTML5 will ultimately bring to the table (some of which can be used today). Having been through the div versus layer battle back in the IE4 and Netscape 4 days I think we’re headed down that road again as a result of browsers implementing features differently. I’ve been spending a lot of time researching and playing around with HTML5 samples and features (mainly because we’re already seeing demand for training on HTML5) and there’s a lot of great stuff there that will truly revolutionize web applications as we know them. However, browsers just aren’t there yet and many people outside of the development world don’t really feel a need to upgrade their browser if it’s working reasonably well (Mom and Dad come to mind) so it’s going to be awhile.

There’s a nice test site at http://www.HTML5Test.com that runs through different HTML5 features and scores how well they’re supported. They don’t test for everything and are very clear about that on the site:

“The HTML5 test score is only an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.

The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. Apart from the main HTML5 specification and other specifications created the W3C HTML Working Group, this test also awards points for supporting related drafts and specifications. Some of these specifications were initially part of HTML5, but are now further developed by other W3C working groups. WebGL is also part of this test despite not being developed by the W3C, because it extends the HTML5 canvas element with a 3d context.

The test also awards bonus points for supporting audio and video codecs and supporting SVG or MathML embedding in a plain HTML document. These test do not count towards the total score because HTML5 does not specify any required audio or video codec. Also SVG and MathML are not required by HTML5, the specification only specifies rules for how such content should be embedded inside a plain HTML file.

Please be aware that the specifications that are being tested are still in development and could change before receiving an official status. In the future new tests will be added for the pieces of the specification that are currently still missing. The maximum number of points that can be scored is 300 at this moment, but this is a moving goalpost.”

It looks like the tests run by the site haven’t been updated since June, but the numbers are pretty scary as a developer because it means I’m going to have to do a lot of browser sniffing before assuming a particular feature is available to use. Not that much different from what we do today as far as browser sniffing you say? I’d have to disagree since HTML5 takes it to a whole new level. In today’s world we have script libraries such as jQuery (my personal favorite), Prototype, script.aculo.us, YUI Library, MooTools, etc. that handle the heavy lifting for us. Until those libraries handle all of the key HTML5 features available it’s going to be a challenge. Certain features such as Canvas are supported fairly well across most of the major browsers while other features such as audio and video are hit or miss depending upon what codec you want to use. Run the tests yourself to see what passes and what fails for different browsers.

You can also view the HTML5 Test Suite Conformance Results at http://test.w3.org/html/tests/reporting/report.htm. To be upfront, the W3C states the following about the results, “The HTML5 Test suite is still being developed. The number of tests and the results on these tests will change. The results in this document may be updated, replaced or obsoleted by others documents at any time. It is inappropriate to cite those results as other than work in progress and unstable.”

image

The table below lists the scores that the HTML5Test site returned for different browsers I have installed on my desktop PC and laptop.  I went ahead and included IE9 even though that’s probably not fair – it’s still in beta plus the W3C tests make it look much better than the number shown below. A specific list of tests run and features supported are given when you go to the site.

 

image

image

Chrome 8

Safari 5 for Windows

image image
   
image image

Opera 10

Firefox 3.6

image image
   
image image

Internet Explorer 9 Beta
(Note that it’s still beta and the number totally conflicts with what the W3C reported. I’d love to know why there’s such a huge difference between test results!)

Internet Explorer 8

image image

 

So who do you trust on this stuff given that different tests show different results? No one! Do the tests for yourself using existing HTML 5 samples out there such as those available with the Hardboiled Web Design book at http://hardboiledwebdesign.com/code. Running through some of those samples I found a lot of discrepancies between browsers. The differences reinforce my belief that HTML5 is going to present a huge challenge for developers. But, I still like the features it offers and think it’ll be great once we finally have some consistency between browsers.

Am I opposed to HTML5 as a result of these tests? Of course not - I’m actually really excited about what it offers.  However, I’m trying to be realistic and feel it'll definitely add a new level of headache to the Web application development process having been through something like this many years ago. On the flipside, developers that are able to target a specific browser (typically Intranet apps) or master the cross-browser issues are going to release some pretty sweet applications. Check out http://html5gallery.com/ for a look at some of the more cutting-edge sites out there that use HTML5. Also check out the http://www.beautyoftheweb.com site that Microsoft put together to showcase IE9.

comments powered by Disqus

8 Comments

  • How about firefox?

  • webdiyer: Not sure how I forgot to add that one. I'll get it added though. Thanks for the reminder. :-)

  • The content was very good liked it. Visit :( picturebite dot com (for Personalised gifts).

  • Great post Dan, the info is appreciated as we keep an eye on when we should be adopting emerging technologies into our LOB apps. Looks like it definitely holds promise but it's still going to be a little while. Reminds me of the progression from XMLHttpRequest to AJAX (at least what we refer to today as "AJAX" :-)). In that case it took nearly a decade from introduction of the technology to widespread adoption by the development community (for LOB apps, at least) via libraries like jQuery. Of course I'd expect HTML5 adoption to be faster since it is coming directly from the standards writers, but hmm -- 3 years? 5 years?

  • Is Microsoft simply not capable of building a standards based browser like Chrome? Or perhaps this is a ploy to keep Silverlight viable!

  • Bonneville: Have you installed IE9? If not, I wouldn't be so quick to jump to those types of assumptions.  I think you'll find it's very standards compliant actually....much more than reflected with this test. I'll admit I was bummed when I saw the results but I'd wait until the final release before judging especially given that all the other browsers listed are RTM. Check out the following article to see how well they're apparently doing: http://www.engadget.com/2010/11/02/w3c-tests-html5-browser-compatibility-crowns-ie9-the-champ/

    I personally prefer Chrome right now but do like what I'm seeing with IE9 and if they end up delivering everything they've promised I'll switch. As far as your Silverlight statement, that's a pretty outlandish comment and just plain ridiculous.

    Dan

  • Arturo:

    Thanks a lot for the article. A link to the W3C test results are included in the post but I decided to put in more detail based on your comment. I appreciate it.

    Dan

  • Mike,

    Glad you found the post useful. Check out the update I added since it provides more insight into things like IE9 and shows how well it's actually doing with regard to standards. For some reason the test page I ran didn't give it a good score but it could be the specific beta version I had. Plus, it's not really fair to compare a beta to other officially released browsers.

    Dan

Comments have been disabled for this content.