HTML5

The ICS UI code now supports HTML5. It does so in a way that makes its use optional.

HTML5 Elements

The following HTML5 elements are used in the ICS UI code:

article - used by comments
aside - used by the right column of a page
footer - used by the page footer and the legal component
header - used by multiple components
hgroup - used by the about page
nav - used by the banner, breadcrumbs, the navigation menu, and the paging controls
section - used by the section component

To get these elements recognized by IE browsers, put the following conditional comments on your page:

 <!--[if IE]>
 <script type="text/javascript">
 document.createElement('article');
 document.createElement('aside');
 document.createElement('footer');
 document.createElement('header');
 document.createElement('hgroup');
 document.createElement('nav');
 document.createElement('section');
 </script>
 <![endif]-->

The new HTML5 doctype

The new doctype is simplified to <!DOCTYPE html>. The html tag is trimmed to just contain the lang attribute.

This new doctype triggers strict mode. This has an implication with image alignment. It puts about 4 pixels of invisible space at the bottom of an image, simulating the space that would be available for descenders of inline text. In some cases, this results in better image alignment. In other cases, changing vertical-align to top or bottom better supports alignment in both doctypes. Another way to solve the issue is to set the image to display:block and float it left. There is no "one size fits all" fix.

With the new html5 doctype, you no longer need to define the type attribute in script and link tags.

CSS Styling

To get the new html5 elements to display properly on the page, the following is defined in our base.css file:

article, aside, footer, header, hgroup,  nav, section {display:block} /*html 5 elements*/

All other styling is done via classes assigned to these elements. There is no styling of html5 elements at this point in time so using html5 elements remains optional.

Support

The ICS UI code will be tested using the new HTML5 strict doctype moving forward. The initial conversion to HTML5 involved testing to insure the UI still works in the transitional doctype.