Tuesday, July 3, 2012

HTML5 Tags in IE8


I'm now creating all new websites in HTML5. As always, IE is way behind in technology. This article explains how to get your html5 tags working just like they would in Opera, Safari, Chrome or Firefox.
You can get HTML5 tags working in IE7 and IE8 by including this JavaScript in the head of your document. For preformance include it after you load your CSS.
 
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
 
Firefox, Chrome and Safari know these should be block level elements but ie8 and previous so not. Be sure to declare any element new to HTML5 as block in your css file, otherwise declare them as inline so all the browsers know what to do.
 
header
,nav
,section
,article
,aside
,footer
,hgroup 
{ 
display: block;
}
 
So far this has covered all my needs. If you have something further to share, please tweet me @nickyeoman.

From CDN

If you prefer you can pull a more elabortate html shiv from Google Code like so:
<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
If your looking for further reference, this method is commonly refered to as html shiv or html shim.

No comments:

Post a Comment