Making HTML5 work in old versions of Internet Explorer

Ian Devlin Read more March 7, 2011

legacy-and-html5

Making HTML5 work in old versions of Internet Explorer

One of the main reasons why developers may not be making the move to HTML5 as yet is the perceived lack of support for legacy browsers. This is actually untrue, and whilst there might be some jiggery pokery required for proper backwards compatibility, it’s still possible.

Of course, by legacy browsers I mean Internet Explorer, as all the other major players update regularly and their users tend to follow suit: browsers such as Firefox, Safari and Opera have supported HTML5 for a while. Some developers may decide to stop supporting IE6, but for some that’s not an option and, at any rate, neither IE7 nor IE8 support HTML5 either. IE9 will, but it runs on Windows Vista and Windows 7 only, so the other versions will still be around for a long time to come, as we have seen with IE6.

So what needs to be done to get HTML5 working in Internet Explorer?

Unknown elements

Well first and foremost, IE won’t render any elements it doesn’t recognise, so it will completely ignore HTML5 structural elements such as header, footer, article, section, and nav, all major parts of a HTML5 site. This can be rectified by telling IE about these elements using JavaScript. The best way to do this is to include the HTML5 shiv script, created by Remy Sharp. This handy script creates all the relevant HTML5 elements which IE will now know about when rendering the page.

One problem with this is that it won’t work for users who have JavaScript turned off. Unfortunately there is no way around this, so a decision has to be made by the developer to either use HTML5 or stay with HTML 4.01.

Styling

Most browsers have internal stylesheets that, amongst other things, apply display:block to block level elements. Whilst some of the newer browsers now do this for the relevant HTML5 elements, some don’t, and this needs to be added for all browsers. Simply adding the following styling will do the trick:

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

Form elements

And what about some of the new elements themselves, such as the new input types – how do these render on legacy browsers?

Fine actually. Since the HTML5 spec was extended in a backwards-compatible way, any input types that aren’t recognised, are simply treated as text and will simple be rendered as so.

Multimedia

As I’ve discussed in the past, the video and audio elements are designed to allow a fall back to Flash, which will work fine on Internet Explorer.

The move to HTML5 will still be a gradual one, and some won’t see nor have the need to use any of the new functionality that it provides, but when they do, they can be (relatively) safe in the knowledge that older browsers will render their sites just fine.