December 2011 Meeting Report

At our December meeting, we considered how to use HTML5 elements across browsers, even old ones. It turns out that there are two tricks that make that possible.

HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.

A couple of examples:

Eric Meyer:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

HTML5Doctor.com:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

These resets, however, do not work with Internet Explorer before version 9, because earlier versions of IE do not style unknown tags. Solving that requires a second trick -- using a script called "the HTML5 shiv." This javascript can be called by simply adding this statement to the head of your page:

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

The shiv creates elements in the DOM that do not otherwise exist. The reset will then take those created elements and style them as blocks.

We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.