Apr
19th

HTML5 in Internet Explorer.

Files under HTML5, IE, Web development, jQuery | Posted by admin

No web developer can hold those tears of joy while reading HTML 5 specs. Most functions like WebGL, multi-threading and web-sockets are yet to be implemented in browsers but some of the useful tags can already be employed.

Internet Explorer, however, has managed to fail on HTML 5 support even in version 8 – new tags outside HTML 4 are ignored, they cannot be assigned any styles. IE has another issue – HTML 5 support has to be enabled separately for a static document and for dynamically added contents.

Advantages of HTML5 tags:

Use the new tags for:

  • shorter DOCTYPE – finally the HTML document template need not be copied but can be added with <!DOCTYPE html>
  • shorter tags – <header> instead of <div class=”header”>
  • better semantics – search engines and browsers will be able to differentiate menus (<nav>) from the context (<article>) and be aware of the last update (<time pubdate datetime=”…”>).

New tags in HTML 5

The following tags with new meaning can be used without additional browser support:

  • <header> – navigation or introduction block, top part of the page for example
  • <nav> – navigation, the site table of contents
  • <aside> – secondary information, usually placed in side panels
  • <article> – an independent context block. Can be an article’s text or a comment.
  • <section> – a section of a document
  • <footer> – the bottom part of the page, copyrights etc
  • <figure> – image or video file description
  • <hgroup> – group of headings: a heading that contains a title and a subtitle
  • <mark> – word highlighting, in the case of a search match for example
  • <output> – output of a program or a calculation result
  • <time datetime=”…” pubdate> – time. In datetime the time is given in machine format. If pubdate property is present (SGML haters can write pubdate=”pubdate”) then the time shown will be the creation time of the whole document or the nearest <article>.

HTML 5 introduces many other properties, rel values and <input> types that can already be used. More about them on the W3C site or other articles.

The Problem with IE:

It is difficult to tell whether this is a problem or a special feature of Internet Explorer, but the fact remains – any tags that IE doesn’t know it ignores. You could call this a violation of HTML 4 that IE supports. Whatever you call it – the issue exists. Even in the latest IE the new HTML 5 tags cannot be easily assigned styles from CSS. This will be fixed in IE 9, but it’s not even beta yet.

So as usual – IE requires hacks. If you create an element in Javascript: document.createElement(‘article’) IE begins to see the new tag.

We well later see that this hack does not work with the context that is added via innerHTML, which in turn likes to use jQuery. This problem is solved my manipulating Javascript.

The solution:

First, lets make things clear for “normal” browsers. Surely the new tags will not have any special build-in styles (unlike <strong>). We don’t really need this but it wouldn’t hurt to organize certain elements into blocks of CSS:

side, nav, footer, header, section { display: block }

The code that will toggle HTML 5 tags in IE has been written and shared, so without reinventing the wheel put this into <head> in front of your favorite tags:

<!–[if IE]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>

Most HTML 5 sites use the script at this URL, it is likely that it’s already been cached in the browser.

The innerHTML has been realized with a small JS-script that can be downloaded and added to your site. All the HTML5 needs to be wrapped into innerShiv(html5) function.

Here’s an example for jQuery:

$(‘#example’).append(innerShiv(“<section><header>jQuery</header></section>”))

Here’s pure JS:

var s = document.createElement(‘section’);
s.appendChild(innerShiv(“<header>&ltPlain JS</header>”));
document.getElementById(‘example’).appendChild(s);

For $(html5).appendTo(‘#example’) the second argument given to innerShiv must be false, so that it would give the result in a format suitable by jQuery:

$(innerShiv(html5, false)).appendTo(‘#example’)

Here’s a simple function called $5 which also helps clean up the code for standards-compliant browsers:

if (jQuery.browser.msie) {
    window.$5 = function(html5) {
        return jQuery(innerShiv(html5, false))
    }
} else {
    window.$5 = function(html5) {
        return jQuery(html5)
    }
}

Here’s how to use it:

$5(html5).appendTo(‘#example’)

Long live the new web!

Post a Comment