RSS feed

Squidoo Lens

Categories

HTML 5 and Backwards Compatibility

The newest spec for HTML is still not a complete animal just yet, but all ready web-designers are putting it into usage.  This is a good thing, as it is very important for a web-designer to stay on top of new web technologies.

Still there are many support issues with HTML5, and CSS3 (which web designers and developers tend to think of as two peas in a pod).  IE8 and lower simply do not support HTML5.  Fortunately all the major newer browsers do at least to some extent (IE9 and up, Chrome, newer versions of FF and Safari, and the list goes on).

There’s a number of ways to respond to the support issues with the newest HTML specification.  You could just keep making your sites in HTML4/XHTML,  but even if you do you should still learn HTML5 since its support is only becoming greater.  There’s also a number of tricks you can use to force it to (at  least to an extent) work on older browsers that don’t support it.  Or you can just stop worrying about whether your websites are compatible with older browsers.

There’s plenty of arguments for and against ignoring older browsers (especially IE6, and even IE7 now).  But IE8 is still very popular, and in most cases it would be a mistake to ignore this browser.

Fortunately one of the really big issues with earlier versions of IE and other old browsers is very easy to fix.  If you view an HTML 5 website in IE8 for example, without any sort of “fixes” HTML5 tags such as Header, Footer, and Aside are simply ignored.   So any styles you created for them will be ignored, as if they don’t even exist.

A little javascript however fixes this problem nicely:

<script type=”text/javascript”>
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“aside”);
document.createElement(“section”);
</script>

You can put this in the head section of your website, but it would be best to place it in an external JS file.

One more issue that will become readily apparent is that older browsers, even after the JS fix, aren’t going to recognize the new HTML5 tags as block elements.  A bit of CSS will fix this.  Here’s the CSS that I use:

header, footer, article, aside, section, hgroup, nav
{
display:block;
}

Now older browers will recognize your HTML5 tags, and display them as blocks.

There is of course a lot more to getting HTML5 to work on older browsers than this, but at least now your HTML5 website’s layout should render basically correctly.