How to use HTML5 in IE 7?

Question

I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.

For example

<div id="container"> 
    <header id="header"> 
        something 
    </header>
</div>

In Internet Explorer 7 the header is not shown at all.

I found a workaround here, a IE HTML5 enabling script, which creates the html5 elements with javascript. But what happens is that the <header> tag looks not at all as it does in other browsers.

So my question is, is it too early to use HTML5 yet or how can I make it cross-browser working?

Solution 1

This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:

http://www.modernizr.com/

Solution 2

There are 2 important things to consider before using HTML5;

1. Target audience (with their browser choice)
2. HTML5 Useful features on your site.

If you are sure that a lot of your users are on IE8 and below, you should avoid using HTML5 almost entirely.

So when you say "is it too early to use HTML5 yet", the answer is it depends on your user base. IE has good support for HTML5 only from version 9 and above..

There is no way by which you can make HTML5 advanced features to work on IE7/8...The html5.js you referred to just makes your CSS to "not ignore" any HTML5 elements and apply styling..It does not do anything further than that..

For all major browser support and score, you can check out html5test.com

Apart from that, you may also check out a very nicely explained tutorial on HTML5 called as DesignMobileWeb available on http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

Please do remember that if you are going to have a basic site, using HTML5 should be avoided. You should consider HTML5 only if you plan to use Local Storage, Offline Access and HTML5 Forms for mobile devices, etc

Solution 3

IE < 9 doesn't recognize the HTML5 elements and will not generate them. So I use this bit of JS to do the generation:

var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');

for (var i = 0; i < e.length; i++){
    document.createElement(e[i]);
}

I use this conditional comment to check whether I need to run the script

<!--[if lt IE 9]>
    <script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->

Of course, you will need to style the tags for IE < 9, but you would need to anyway.

Solution 4

Start with this: http://html5boilerplate.com/. It should solve most of your problems. It works great.

Solution 5

IE versions < 9 will not render elements that they don't recognize, so the new HTML5 elements, header, etc are off the list. Other browsers render unrecognized elements, but without styling.

The way around this is to "show" the new elements to IE by squirting them into the DOM directly using JavaScript. You only have to do this once on each page view.

The two standard ways to do this are:

• The Google Shiv: http://code.google.com/p/html5shiv/
• Modernizr: http://modernizr.com/

Modernizr also does a whole bunch of other things to do with feature detection.

View more solutions

Comments

[Chris]

Thanks, but the users need to install this when visiting my website, dont they? I dont think thats a good idea, nobody will do it.

[Alohci]

why aren't figcaption and summary on that list?

[Jason Gennaro]

That was an oversight, @Alohci. Thanks for pointing it out. Edited my answer (and my script!).

[superluminary]

There are lots of libraries to do this, including Modernizr and the Google Shiv, but essentially this is what is going on under the hood.

[Ricardo Zea]

There's actually a shorter version from from a guy named Nico Hagenburger: <script>"'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)}‌​) </script>

[pm_labs]

The shorter version looks nice but Nico's blog forgot to include the IE conditionals, make sure you still add the IE conditionals before/after the script declaration.