Search code examples
javascriptcsshtmlmodernizrhtml5shiv

Understanding Modernizr benefits over html5shiv


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?


Solution

  • 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.