Modernizr+html5shiv VS ie9.js

Question

I'm building a responsive design with HTML5. At first I used Modernizr and the CSS reset of HTML5 Boilerplate, but of course the html5 elements' classes and ids were not recognized by IE<9.

What I need most therefore is full support for html5 elements, and preferably a good display fallback for images with "max-width", without using CSS hacks.

Which of these options should I follow?

1. Include html5shiv and ie9.js with conditional comments
2. Include only ie9.js for all browsers
3. Forget about ie9.js

Thanks a lot!

Answer 1

html5shiv and ie9.js does completely different things. html5shiv resolves a bug in older versions of Internet Explorer where arbitrary elements (such as those introduced by HTML5, which the browsers predate) are not stylable by CSS. ie9.js attempts to fix certain rendering bugs in older versions of IE and add support for newer CSS3 features. The question of which one to include comes down to what you mean by:

full support for html5 elements

Do you need to use these elements and support older versions of IE? Then you'll need html5shiv. Do you need to use CSS3 properties and selectors? Then you'll want ie9.js. Including ie9.js solely to add support for max-width however is not a good idea.

---

And one more thing:

Include only ie9.js for all browsers

should never be an option - doing this will only adversely affect your page's performance on other browsers.

Answer 2

Modernizr includes the shiv code to add the new tags to IE<9. Make sure you add the link to it in the head section, before other javascript links/code.

Just start from the index.html and other files file provided in HTML5BoilerPlate and add your code in.