Affinitive’s Social Media Playground

HTML5 has been around for a while. Yes, it is still in draft form and the formal specification hasn’t been published yet, but that didn’t stop all major modern browsers from implementing a decent set of HTML5 features. By now, the web is chock full of HTML5 examples showing off everything from latest JavaScript to HTML5 markup tags. But people still seem to be on the edge when implementing them in real-world production environments. This should not be the case. The reality is that HTML5 features already implemented in modern browsers are mostly stable, and the published spec will ultimately not have major changes.

If there is still some doubt that HTML5 is still the “future” and is not needed in the current web, let me throw in some rough figures. Note, these numbers are taken from Wikipedia. So interpret them how you wish. Roughly 54% people still use Microsoft Internet Explorer (IE), of that ~ 36% is IE8. Making that 23% globally. About 31% use Firefox, about 80% of which is 3.5 or 3.6, making that 25% of the global market. Safari and Google Chrome take up another 13%, although I do not know what percentage of those browser version are HTML5 capable and in use. It can be assumed that at least half of the browsers out there support the commonly touted HTML5 features. So should we let half the people miss out on great features due to other people still using IE7 and Firefox 2?

Rolling out HTML5 may be easier than you think. Anyone who runs a commonly visited site probably already has different style sheets and/or JavaScript for IE/IE6 users. So pull in HTML5 JavaScript conditionally by checking if functions exists. It is ill-advised to rely on checking the user agent, as some browsers misreport it (i.e., IE8 in “IE7 mode” still has the window.postMessage JavaScript function).

Putting in HTML5 tags on the other hand is tricky. Putting in new tags such as <article> and <aside> won’t render properly in older browsers. The best way so far is to insert tags dynamically into the DOM using JavaScript. This isn’t practical for simple tags such as <article> but can be used for flashier tags like canvas. Existing libraries are already implemented this way. Cufon uses Canvas to render fonts in most browsers and VML in IE.