Disadvantages of Custom HTML Shiv

Question

In a recent project, I used the "HTML5 Shiv" by Alexander Farkas , and I noticed that when mining the script was 2.274 KB. This seemed to me pretty big for the concept that John Resig showed mostly two lines (I understand that this is very simplified because John did not include a check for support or all new HTML5 elements). I dig into the source of html5shiv . It was a 248 slot that seemed like a lot of unnecessary code for such a simple task. I achieved a much simpler shiva 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); 

Only ~ 270 bytes are minimized (which is 88% saving on the size of Farkas Shiv). In combination with the 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 Farkas shiv does some magic with creating elements and checking functions inside try / catch. Does it need meat and filler? Is my solution sufficient, or does Farkas shiv take into account what I did not consider?

EDIT

The script now creates its own style tag with the corresponding declarations (and still this 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 is for IE without the support of HTML5 elements at the time the page loads.

There are, in fact, significant further issues that need to be addressed that you will encounter if you use Javascript to change the contents of the page after loading.

At some point, there was actually a secondary script called html5 internal shiv that solved these problems. However, later versions of the main html_shiv script also included these fixes, so a secondary script is no longer required. But that means the main script is now much larger.

This corresponds to the amount of code you saw.

If your HTML is static, then the answer is no, you don’t need all this extra code; your version is fine. (or you can go to the Github html5_shiv page and download the previous version, earlier versions looked much more like your code).

But if you intend to write a site with any type of dynamic content, you will be advised to use the full current version of html5_shiv. It fixes not only one problem.