Web design: HTML5 and old user agents
Although it was mainly a trivial exercise to upgrade to the HTML5 doctype and start using the new semantic elements, some additional effort was required in order to maintain compatibility with old user agents. Indeed, Internet Explorer 8 and below will simply ignore these elements when constructing the DOM. This is a problem, in particular, if you want to style them. Fortunately, there is a very simple way of making Internet Explorer 5.5–8 keep these elements. The trick is to create ‘samples’ of them using JavaScript. In my case, I added
<!--[if lte IE 8]><script type="text/javascript" language="JavaScript" src="../JavaScript/html5.js"></script><![endif]-->
to the HEAD section where the contents of html5.js
is simply
/* Make HTML5 elements accessible to IE 5.5 - IE 8. */
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("footer");
document.createElement("aside");
This will make the new elements appear in the DOM as expected, but they will be given a ‘default’ style of display: inline
instead of the expected display: block
. Therefore I also added
header, footer, main, nav, article, aside {
display: block;
}
to my global CSS file. This CSS is also required by other pre-HTML5 browsers that do create the expected DOM but – of course – do not know that the unknown elements should be ‘blocks’.