Understanding Modernizr benefits over html5shiv

javascript css html modernizr html5shiv

22,162

Solution 1

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.

Solution 2

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

22,162

Author by

bevacqua

Principal Software Engineer at Elastic, helping lead the Elastic Cloud UI team. ● Pre-IPO employee at Elastic, helping drive key initiatives in Elastic Cloud ● Authored 3 books on JavaScript/Node.js application architecture ● Organized first ever Node.js conference in Buenos Aires (NodeConf Argentina) ● Author dragula drag & drop library (20k stars) and prolific open source contributor ● Wrote my own MVC frameworks, clones of async, jQuery, Markdown parsers, and more (purely as a way of learning) ● Grew newsletter on JavaScript to 17k subscribers (Pony Foo Weekly) ● 40k karma on StackOverflow 😅 ● Avid reader Published author of several software development books: Mastering Modular JavaScript (O'Reilly, 2018), Practical Modern JavaScript (O'Reilly, 2017), and JavaScript Application Design (Manning, 2015). Nicolás has vast experience in tackling challenging technical problems, as well as in helping manage teams, driving technical innovation, collaborating across areas, and sharing his applied learning.

Updated on July 09, 2022

Comments

bevacqua almost 2 years

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?
bevacqua over 12 years

I see, and does Modernizr do anything to improve IE's CSS3 support?
tkone over 12 years

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 github.com/Modernizr/Modernizr/wiki/… for amn exhaustive list of polyfills for use in it.
tkone over 12 years

They are actually complimentary to each other though :)
bevacqua over 12 years

Great answer, lastly, do you know what ie9.js involvement in all this?
tkone over 12 years

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!
Baumr over 11 years

As I recall, html5shiv also "adds the new html5 tags that aren't available"... right?
tkone over 11 years

Yes it does. IE lets you "create" tags by declaring them with document.createElement
JGallardo almost 11 years

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