Modernizr vs HTML shiv

Question

If I ONLY need older browsers to recognize HTML5 tags, which should I use, Modernizr or the popular HTML5 shiv? And also, if I don't need to style this HTML5 tags, do I need the browsers to recognize them anyways? Or is it only necessary when adding CSS to these tags?

Thanks!

Answer 1

html5shiv basically allows IE to recognize and style HTML5 elements, while Modernizr provides the same plus feature detection supported by a broswer.

So to answer your question HTML5 shiv should be sufficient to recognize HTML5 tags in IE. (note I say IE here since that is what the html5shiv targets, not sure what you mean when you say older browsers)

For the second part, even if you don't want to style the HTML5 tags, I would advice to use the shiv since the browser may either display them incorrectly, or not at all, so it is better to be safe.

Answer 2

HTML5 Shiv is smaller, and unless you need some of Modernizr's detection functionality, go for the shiv.

The size of the file is very important, since it is always in the head of the html document and blocks the download of additional resources until fully executed.

Since it is only needed for older browsers, I use the following code:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You can remove the html tags you don't use, but then you will be unable the use the file hosted at Google.

Answer 3

You can alternatively use Modernizr to load a particular file if browser supports that particular CSS or HTML5 features.

Let say if the browser doesn't support 'canvas' as HTML5 element and 'fontface' as CSS3 property

Modernizr.load({
test: Modernizr.fontface && Modernizr.canvas, // Test if the browser supports it or not
yep : '/path-to/html5-css3-attributes.css',  // If browser supports it, load this file
nope: '/path-to/old-css-attributes.css' // If NOT, load this instead
});

You can use .js also in your file path condition.