39

I know there's a lot of good questions on the site about these two script libraries.

I wanted to ask something that I can't seem to find in any of them though.

What does Modernizr provide that html5shiv doesn't out of the box, that is, just including the script.

I know html5shiv "just" fixes HTML5 elements for IE < 9, does it's support stop there?

Does Modernizr fix CSS3 issues on IE navigators? Does ie9.js do that? (and I mean this particular question out of the box, without additional js code to handle corner-cases)

What are the advantages of Modernizr over html5shiv when you take into account using the library besides just including the script?

tkone
  • 22,092
  • 5
  • 54
  • 78
bevacqua
  • 47,502
  • 56
  • 171
  • 285
  • 2
    Not an answer, but my understanding is that modernizr is often just used to check if a browser supports new (CSS3 / HTML5) features. And then the code can deal with those that don't. It does have what it calls 'polyfills,' which are basically shims or more complex versions of them. I'm not completely sure what Modernizr offers compared to html5shiv (in terms of shims) but, overall, Modernizr is often used to check rather than to patch. Maybe I'm wrong, but that' s my thought. – Marshall Mar 10 '12 at 02:13
  • http://blog.userinterfacemedia.com/modernizr-vs-html5shiv/ – Michael Freake Mar 16 '15 at 14:13

2 Answers2

55

They do different things.

Modernizr detects the availability of features in a page allowing you to provide your own polyfills for older browsers should you require that functionality. You can add support for <canvas> using a canvas tag polyfill so that canvas functionality, including it's JavaScript interface, in browsers that don't support the <canvas> tag.

Html5shiv adds the new html5 tags that aren't available (<section>, <header>, etc) to older browsers. It also creates the default styles (display: block for <section> for example).

That's it. It provides no other functionality.

tkone
  • 22,092
  • 5
  • 54
  • 78
  • I see, and does Modernizr do anything to improve IE's CSS3 support? – bevacqua Mar 10 '12 at 02:21
  • 5
    No. It does nothing by itself other than tell you if it's supported and if it's not supported let you supply a polyfill to add that functionality to the browser. See https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills for amn exhaustive list of polyfills for use in it. – tkone Mar 10 '12 at 02:31
  • They are actually complimentary to each other though :) – tkone Mar 10 '12 at 02:32
  • Great answer, lastly, do you know what ie9.js involvement in all this? – bevacqua Mar 10 '12 at 13:29
  • I don't have any experience with that library but it looks like it tries to make HTML/CSS behave like ie9 in ie8 and 7. If it works this would be a nice addition to our site! Thanks for showing this to me! – tkone Mar 10 '12 at 14:23
  • As I recall, html5shiv also "adds the new html5 tags that aren't available"... right? – Baumr Nov 02 '12 at 02:34
  • Yes it does. IE lets you "create" tags by declaring them with `document.createElement` – tkone Nov 02 '12 at 03:02
40

Modernizr 1.5+ actually includes HTML5Shiv, so if you use it, shiv is redundant. Source: http://modernizr.com/docs/#html5inie

"As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library."

swrobel
  • 4,053
  • 2
  • 33
  • 42
  • 4
    From link,"As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library." – JGallardo Sep 26 '13 at 17:40