What's the difference between Modernizr and Html5Shiv?

Question

I was toying with the idea of switching to html5. It seems there are 2 major scripts for dealing with supporting html5 on older browsers.

Modernizr and Html5Shiv

I was wondering if they do the same thing. Which one to choose and why?

Any ideas?

Answer 1

Modernizr is used to check the availability of HTML5 features in different rendering engines. It includes a script like Html5Shiv, which (only) enables HTML5 tags on Microsoft Internet Explorer (prior to version 9, which knew HTML5). See also "How to get HTML5 working in IE and Firefox 2".

If you just want to enable HTML5 for IE < 9, then Html5Shiv would be sufficient. I'm using the Html5Shiv version by Remy Sharp within a MS conditional comment:

<!--[if lte IE 8]>
    <script src="templates/js/html5.js"></script>
<![endif]-->

If you also want to check (via CSS or JS), if the clients browser is capable of e.g. HTML5-form-elements (like Operas date input), CSS3 columns or gradients, then use Modernizr.

Answer 2

You might also want to check out html5boilerplate.com, a good resource for starting with html5 sites, they provide toggleable choices like html5 shiv or modernizr along with many other baseline improvements.

Answer 3

I know this is from a while back, but I felt I should add that modernizr doesn't appear to polyfill HTML5 elements that are loaded via AJAX - it only works on content that was present on initial page load. Html5Shiv DOES work on content loaded via AJAX, but it's also only a small subset of modernizr's feature set. We're actually using both on the web app I'm working on.