09
Apr
2010
On 09, Apr 2010 | No Comments | In Browsers, Coding, HTML5/CSS3
HTML 5 in Internet Explorer
by Stryker
In brief: How to make the new HTML 5 tags work with Internet Explorer.
Web developers cry happily looking at HTML 5, which has finally arrived. Though most of its features, such as WebGL, multiple streams, and web sockets, are not yet supported by some browsers, we can already use its new, handy tags.
Alas, Internet Explorer (even its latest version, IE8) is dragging its feet as usually — it simply ignores any tags newer than HTML 4, so you cannot even use CSS styles with them!
Actually, there are two problems in IE: you have to separately switch on the support of the HTML 5 tags in the ordinary document and in the dynamically added (for example, via AJAX) content.
Advantages
The reasons to use the new tags:
- Brief DOCTYPE — Finally, you don’t need to copy the long DTD as you can simply type in the following:
- More concise attributes — Instead of , you can simply write
- More semantics — Now search engines and web browsers will know where is the menu
New HTML 5 tags
You can start using the following new tags, not waiting for browser support to be added:
- Block for a navigation menu or an introduction (for example, the website’s top):
- Navigation (for example, the website’s menu):
- Secondary information (which is often placed in sidebars):
- Independent part of the content (for example, a text of the article, or a separate comment):
- Document section:
- The website’s “bottom” (often used for a copyright note):
- Description of a picture/video:
- Block of headers. (For example, the header may consist of the main header and the subheader.):
- Marking of some word (for example, of a word which matches some search query):
- Program output or calculation results:
- Time. In datetime, time is included in a machine-friendly format. If the pubdate property is used (foes of SGML may write pubdate=”pubdate”), then the time refers to the creation of the document or of the nearest article:
HTML 5 many other properties too, rel values,
types, which you can already use. Read more at W3C or in other articles.Troubles with IE
It’s hard to say if this is a specific problem or a peculiarity of Internet Explorer, but this browser simply ignores the tags it doesn’t know. Surely, you can say that the new tags break the HTML 4 standard, which is supported by IE, but the drawback is very real: Even the latest version of Internet Explorer doesn’t let you easily use CSS styles with the new HTML 5 tags. The problem should be fixed in IE 9, but it’s not yet available even in a beta version.
Solution
Let’s first talk about the “good” browsers. Surely, the new tags don’t have any special built-in styles (for example, unlike). Though we don’t need those styles that much, it is worthwhile to make some elements as blocks in CSS:
aside, nav, footer, header, section { display: block }
The code to include HTML 5 tags for IE is already available, so just include it in , before any new tags:
Most of HTML 5 based sites use exactly this script, so it’s highly probable that it has already been cached by the user’s browser.
The innerHTML solution is available as a compact JS script. Download it and include it in your website’s code, and wrap all HTML code into the innerShiv(html5) function.
jQuery example:
$('#example').append(innerShiv("
jQuery "))
Pure JS example:
var s = document.createElement('section');
s.appendChild(innerShiv("
<Plain JS "));
document.getElementById('example').appendChild(s);
For $(html5).appendTo(‘#example’), pass false as the second argument in innerShiv, so the result is in the jQuery-compatible format:
$(innerShiv(html5, false)).appendTo(‘#example’)
However, I simply made the $5 function for myself, and removed the code not needed by good browsers:
if (jQuery.browser.msie) {
window.$5 = function(html5) {
return jQuery(innerShiv(html5, false))
}
} else {
window.$5 = function(html5) {
return jQuery(html5)
}
}
I just write:
$5(html5).appendTo(‘#example’)
Long live the new Web! :)
p.s. Also you could read this article on russian here. My website – http://sitnik.ru
