HTML5 and Internet Explorer 8: not good friends
With the gradual introduction of HTML5 new tags, web developers have questioned its use because of compatibility issues. I've already explained that with new elements you might always have troubles. Personally, what makes me really mad is not knowing exactly what will happen when I use HTML5. Will the web site look as I thought? Will it always look and behave as I see it in my testing browsers?
There's another thing to be considered: the future of internet will be "mobile". We've already noticed that the most used word when talking about the future internet is "mobile". Everything's going mobile. New technologies and new devices are capable of surfing the internet with mobile applications. I'm thinking about smartphones or tablets (prominent market analists think that 2011 and 2012 will be tablet years).
Said that, it is quite clear that web developers will have to (or should have already) start to develop sites and applications in a different way and use HTML5 new features. We should consider the way an iPhone user will see a web site. Possibly we will have to create a standard version and a mobile version of the sites - if we don't want to let mobile users go away or maybe even never reach our homepage.
To get to the point, it's been quite a while since I've started to look around to gather information regarding HTML5. It is quite known that Internet Explorer and HTML5 are not very good friends. Actually, IE doesn't even consider HTML5 new elements. That could be a big problem. But there's a workaround!
The solution
Some very ingenius guy has found something really interesting. Sjoerd Visscher discovered that if you create the new element with JavaScript, IE will acknowledge it. As an example:
After adding the little script, IE will style your element.
The above styling will perfectly work in IE! Frankly, I am still amazed, and probably I shouldn't be. Anyway...
The next step would be to write a JavaScript to create all the new HTML5 elements. Don't do it, someone already did it:
Or if you prefer, you can downaload html5.js
You then just need to include the js file in your page, putting the following snippet in the head of your document:
As explained in my previous post, we use CSS conditional statement in order to load the js file only if target browser is IE version 8 or less (lte).
Just for completeness, I would like to add two remarks about the above solution. First of all, the target browser must have JavaScript enabled. Secondly, your document must have a section which is actually not required by HTML5.
And that's all.
There's another thing to be considered: the future of internet will be "mobile". We've already noticed that the most used word when talking about the future internet is "mobile". Everything's going mobile. New technologies and new devices are capable of surfing the internet with mobile applications. I'm thinking about smartphones or tablets (prominent market analists think that 2011 and 2012 will be tablet years).
Said that, it is quite clear that web developers will have to (or should have already) start to develop sites and applications in a different way and use HTML5 new features. We should consider the way an iPhone user will see a web site. Possibly we will have to create a standard version and a mobile version of the sites - if we don't want to let mobile users go away or maybe even never reach our homepage.
To get to the point, it's been quite a while since I've started to look around to gather information regarding HTML5. It is quite known that Internet Explorer and HTML5 are not very good friends. Actually, IE doesn't even consider HTML5 new elements. That could be a big problem. But there's a workaround!
The solution
Some very ingenius guy has found something really interesting. Sjoerd Visscher discovered that if you create the new element with JavaScript, IE will acknowledge it. As an example:
After adding the little script, IE will style your
The above styling will perfectly work in IE! Frankly, I am still amazed, and probably I shouldn't be. Anyway...
The next step would be to write a JavaScript to create all the new HTML5 elements. Don't do it, someone already did it:
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,
datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video".split(',');
for(var i=0;i
Or if you prefer, you can downaload html5.js
You then just need to include the js file in your page, putting the following snippet in the head of your document:
As explained in my previous post, we use CSS conditional statement in order to load the js file only if target browser is IE version 8 or less (lte).
Just for completeness, I would like to add two remarks about the above solution. First of all, the target browser must have JavaScript enabled. Secondly, your document must have a section which is actually not required by HTML5.
And that's all.