Enable css for HTML5 tags in Older Internet Explorer: HTML5 – The Beautiful Butterfly! Part 3
First you may take a look in:
Part 1
Part 2
This is a very interesting topic. Most of the html5 tags are not supported in older versions Internet Explorer(IE) or other older browsers. When we develop a website in html5, we consider it. You can ignore older versions of FF, Chrome or Safari, but you can’t just ignore IE7 or IE8. Well, some tags are still not supported in any browsers, but what about simple tags like section, article, header, nav etc?
When we apply styling on these tags using css, the tags are not recognized in IE at all. So, no style is shown. For example:
[html]
bla bla bla
[/html]
And you style this
[html]
header{padding: 10px; background: red;}
nav{margin: 10px 5px 10px;}
[/html]
This will look good any modern browser but not in older versions of IE. And it was not discovered until a unknown person make a comment. It was in 2008. The commenter Sjoerd Visscher posted a comment in intertwingly.net/blog/2008/01/22/Best-standards-support:
Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.
And this comment changed everything! Before this comment nobody knew that you can do it, pretty interesting, isn’t it?
So, the way is if we create a simple script line in the head tag, all html5 tags should be introduced in IE.
[html]
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);
[/html]
So, if we need to create a number of elements for IE, we can use an array:
[html]
var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
[/html]
But we don’t want to execute this script in every browsers, only in IE. So, use conditional html tag 
[html]
var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
[/html]
You can see a nice documentation here by John Resig. Another well known and popular web developer Remy Sharp created a script that enable html5 tags in IE and is available in google code. An advanced script is here. So, if you use this you just need to include the source, rest of things will be done by that script
There are many ways out there for IE to recognize the html5 tags. We will discuss about those in some other day
