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>.

December 2011 Meeting Announcement -- New Web, Old Browsers

The next meeting of the PACS CSS Workshop will be Saturday, December 17, at our usual 9-10 hour. Our topic this month is New Web, Old Browsers.

We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.

In the process, we will reveal publicly for the first time a new, never before seen HTML tag.

We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.