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?

Answer 1

Try using chromeframe - http://code.google.com/chrome/chromeframe/

By itself though you cannot use most of the cool new features of HTML5 with IE7. It just isn't implemented in the browser plain and simple.

Answer 2

I check whether or not the requesting client supports the application/xhtml+xml mime type (it is part of the accepts header sent the request).

If it does not, then I send the client a version of the page using div nodes in place of most html5 semantic nodes.

Answer 3

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.

Answer 4

This is very old... Damn... But I guess this could help someone, though

I used this meta

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

And fixed everything without using any more scripts...

Found it here: http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/

Answer 5

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

Answer 6

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.