HTML5 Rolls out

All new websites to feature HTML5

Im happy to announce that we have completed our research into the cross browser incompatibilities of HTML5, and that all new websites will be built using the stable structural elements of the new language. The official recommendation by W3C isnt expected until around May of this year, with the final implementations being expected some time in 2012, but given that we are already developing Apps in HTML5, we just cant wait that long to move our website making procedures forward too. For interested parties, Ive listed a couple of browser inconsistencies and their remedies below.

Internet Explorer

When Internet Explorer encounters unknown elements (such as the ones found in HTML5) it enters them into the DOM tree in an unusual way. Rather than adding them as a child node to the immediate parent, it simply places them at the root level as a sibling rendering them unstylable with CSS. There is a remarkably simple workaround for this, provided by HTML5Shiv. This works by introducing the elements to IE before the DOM has loaded. When it comes to page rendering time, the elements are known to IE and therefore can be styled in CSS. Add the following into your head section:


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Firefox

This presented us with a bit of a nuisance that seemed to be unique to Firefox as our pages rendered correctly in all modern versions of Safari, Opera and Chrome. None of the background styles were showing on the articles, sections, or in fact any of the new elements. Adding a border in Firebug provided the answer, in that Firefox does not render them as block level elements. Again the solution is simple. Simply add the following CSS to your normal reset stylesheets:


/* Firefox block level fixes */
article, section, figure, figcaption, aside, header, footer, hgroup, nav, menu { display:block; }