How to fix IE for HTML5
By Partho, Gaea News NetworkWednesday, December 9, 2009
While covering the top things you need to know about HTML5, we missed an important part. The latest hypertext markup language on web, HTML5 doesn’t have native support for the new semantic elements. The problem has been encountered with IE8 and lower versions. Interestingly, a chunk of web users works on IE, which doesn’t even support HTML5 elements. Earlier <abbr> element couldn’t be styled in IE 6 that led to several workarounds, same with HTML5 styles for IE. The fix is actually incredibly simple, and if you’re using any of the new DOM APIs or HTML5 JavaScript APIs, the requirement for JavaScript is justified. The solution was first posted by Sjoerd Visscher whereby Internet Explorer is able to style any element given that you run a provided code.
Here’s the trick, which requires you to simply create the new element using JavaScript the IE will be able to style.
document.createElement('header');
Now you can use HTML5 shiv to enable all the HTML5 elements for Internet Explorer.
One stop solution
There is a HTML5 shiv to enable all the HTML5 elements for Internet Explorer. The script has to be included in the head element to be able to style the document correctly:
<!--[if IE]> <script src=”https://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–>
This is a one hit solution, if JavaScript is enabled. In case it is disabled the document will be displayed as if CSS hadn’t been applied to the document. This will allow you to all the readable content .
For instance, you want to style the <time> elements in italics
<!DOCTYPE html>
<html>
<head>
<title>Header test</title>
<style>
time { font-style: italic; }
</style>
</head>
<body>
<time datetime="2009-09-13">my birthday</time>
</body>
</html>
To apply the fix, add the indicated line of code
<!DOCTYPE html>
<html>
<head>
<title>Header test</title>
<style>
time { font-style: italic; }
</style>
<!– Add this line –>
<script>document.createElement(’time’);</script>
</head>
<body>
<time datetime=”2009-09-13″>my birthday</time>
</body>
</html>
Tags: HTML, HTML 5, IE, Internet Explorer, Javascript
