Question

On a recent project I used Alexander Farkas’ HTML5 Shiv and I noticed that when minified the script was 2.274 KB. This seemed pretty large to me for a concept that John Resig demonstrated in essentially two lines (I realize that this is highly oversimplified, because John’s doesn’t include a check for support or all of the new HTML5 elements). I dug into the html5shiv source. It was 248 sloc, which seemed like a lot of unnecessary code for such a simple task. I achieved a much simpler shiv in only 14 lines:

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article|aside|audio|canvas|details|figure|figcaption|footer|header|hgroup|nav|output|progress|section|summary|video'.split('|'),
        i        = 0,
        length   = elements.length;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elements[i]);
        }
    }
})(document);

Minified it’s only ~270 bytes (that’s an 88% savings from the size of the Farkas Shiv). When combined with appropriate CSS, it worked correctly in IE 6, 7, and 8.

article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video{display:block;}

It seems that the meat of the Farkas shiv does some magic with creating elements and checking for functions within a try/catch. Is this meat and filler necessary? Is my solution adequate enough or does the Farkas shiv account for something I haven’t considered?

EDIT

The script now creates it own style tag with the proper declarations (and still is only 21 lines!):

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video',
        elementArr = elements.split(','),
        i        = 0,
        length   = elementArr.length,
        script, style;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elementArr[i]);
        }

        script = document.getElementsByTagName('script')[0];
        style = document.createElement('style');
        style.innerHTML = elements+'{display: none}';
        script.parentNode.insertBefore(style, script)
    }
})(document);

Answer 1

The main difference between your code and html5_shiv is that your version only caters for IE’s lack of support for the HTML5 elements during the initial loading of the page.

There are, in fact, significant further issues to be dealt with, which you will encounter if you use Javascript to modify the page content after loading.

At one point, there was actually a secondary script called html5 inner shiv, which solved these problems. However, more recent versions of the main html_shiv script have incorporated these fixes as well, so the secondary script is no longer required. But it does mean that the main script is now a lot bigger.

This accounts for the amount of code you’ve seen.

If your HTML is going to be static, then the answer is no, you don’t need all that extra code; your version is fine. (or you could go to the html5_shiv Github page and download a previous release; the early versions looked a lot more like your code).

But if you intend to write a site with any kind of dynamic content, then you would be well advised to use the full current version of html5_shiv. It fixes more than just the one issue.