How well does your browser support HTML5?

HTML is the acronym for HyperText Markup Language. In essence, it is the language in which web pages are written and interpreted by web browsers. HTML5 is thus the latest version of HTML. According to Wikipedia:

HTML5 is currently being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight. In common usage, HTML5 may also refer to the additional use of CSS3, as both technologies are under development in parallel.

Another definition of HTML5 from html5.org is as follows:

HTML5 is a new version of HTML and XHTML. The HTML5 draft specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.

As the world wide web gears up for the full unleashing of HTML5, some web browsers are already supporting some elements of HTML5. The support varies widely. A relatively new web tool attempts to reveal the HTML5-compatibility of your web browser. All you need to do is visit http://html5test.com and within some seconds, the full report would be revealed.

I have tried it from four different browsers, with interesting results. The following list is based on the performance of the web browsers:

Safari 4 (Win)

Safari (on Windows) has by far the best  feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome.

Particularly interesting is the excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing via CSS (advanced demos).

HTML5 features are well supported with Canvas, Video and Audio all implemented. Only the Geolocation API is currently not available, although apparently this is in the pipeline.

Firefox 3.5 (Win)

Firefox 3.5 has good support for features that you might be looking to use in your client work on a day-to-day basis. @font-face, box-shadow, rgba() and border-radius all work nicely.

Although, it doesn’t quite match up to Safari when it comes to CSS animation, it makes up for this with solid implementation of HTML5 media (video and audio).

A major plus is that Firefox 3.5+ implements the first public draft of the Geolocation specification from the W3C which I anticipate will be very useful in future web applications.

Google Chrome (Win)

As you’d expect for a WebKit browser, Chrome has really excellent support for almost all of the Modernizr tests generated by findmebyip.com.

The big let down is the lack of support for @font-face. This has been widely documented and there are known work arounds for it.  Google has promised that the next version of Chrome will add native support for web fonts.

I was very surprised to see 3D Transforms return positive.  I believe this is currently only supported by the iPhone and iPod Touch so I’m not sure about the accuracy of this result.

Opera 10 (Win)

We got quite a few comments about Opera’s perceived lack of support for advanced features. It’s true that support for CSS3 features is poor, especially when border-radius still hasn’t been implemented.

Nevertheless Opera does have good support for other important web standards which are currently not being tested by findmebyip.com.  He highlights  “Web Forms 2″ and SVG support as two primary examples of Opera’s excellence in these areas.

Nonetheless, I still feel that Opera needs to catch up with the CSS3 spec if it wants to be adopted by the mainstream web dev community.

Internet Explorer 6, 7 & 8

And now the one you’ve all been waiting for.  Lets all have a good laugh! Well not quite, because unlike some other contenders, Internet Explorer does actually support @font-face (all be it only in .eot format). In fact it’s supported it for a while, with even IE6 providing complete support!

Nonetheless, with the exception of font-face, Internet Explorer does display a marked lack of support for almost every kind of advanced/progressive feature.  Hopefully the IE team will be able to look at this in a future release, but I’m not holding out any hope.

Summary

There is now a consistent level of support for many of the CSS3 and HTML5 features that the average developer might use for progressive enhancement.  From my survey the most widely supported features were:

• rgba()
• hsla()
• opacity()
• border-radius (except Opera)
• canvas

Outside of these however, support is patchy and is largely dependant on the whim of the browser manufacturer.  Some browsers are way ahead of the game (Safari), whilst others have a intermediate (Firefox) or even poor(?) support (Opera).

What is HTML 5 ?

HTML 5 is to be the new standard of HTML (Hyper Text Markup Language) HTML 5 has been on the drawing boards to quite some time now all tho it seemed like it was to far into the future to start worrying about now, that said we are getting ever closer to HTML 5 being a common practice amongst webmasters.

Some people believe that HTML 5 coding is only being introduced to make browsers manufacturers (browser/ software companies) while other webmasters see this as a great step forward to being able to develop more powerful multimedia. HTML 5 will change the way we work with general HTML as the soon to be standard code is not just a markup from HTML 4 but more that of a new language, HTML will make life easier for everyone including not just browser manufactures but also developers, there are already some example JavaScript applications and APIs using the upcoming HTML5 code.

Most HTML based websites are using HTML 4 as we speak but this will start to change over the coming months and years, up until now the HTML code has hardly evolved from HTML 2.0 only some issues were addressed with the release of HTML 4 along with a small amount of new code references, HTML 5 is based from HTML 4 but in it’s own right it will be completely different and will change the way your browsers render websites on your PC screen, HTML 5 will rely heavily on JavaScript, should you have JavaScript turned off the website / pages are unlikely to render correctly.

Please check back soon as we will have a more detailed look into the new code.