Html5Shiv VS Dean Edwards IE7-Js VS Modernizr - Which to Choose

HTML5shiv vs Dean Edwards IE7-js vs Modernizr - which to choose?

No, they're not the same at all; they do completely different things.

• html5shiv allows you to use the new HTML5 tags in versions of IE that don't understand them. Without it, IE will choke on these tags, so you need this if you intend to use the tags. Don't expect it to make the tags actually do anything in IE though! It just stop the browser complaining about them.

• modernizr sets a bunch of classes in your HTML, depending on the available features, which you can use to change your layout according to what the browser supports. It also allows you to use the new HTML5 tags in IE, like html5shiv.

• ie7.js (as well as ie8.js and ie9.js) uses Javascript to retro-fit some missing functionality to IE.

As far as I'm aware there's no cross-over between them (aside from html5shiv/modernizr), so you can use any combination of them, depending on what features you need to implement.

While I'm on the subject, and since you're asking about tools to make IE more compatible with other browsers, I suggest you also look into CSS3Pie, which will make your life much happier if you plan to use rounded corners on your site (plus one or two other features).

This also has no cross-over with the other three products you mentioned, though they do all aim to make old versions of IE slightly easier to work with.

Modernizr, html5shiv, ie7.js, and CSS3 Pie. Which to use and when?

I've got extensive experience with all of these, having used them for a few years each.

Modernizr

Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!

HTML5shiv

Very small, just fixes html5 elements in IE, nothing else.

CSS3PIE

Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.

ie7.js (and ie9.js)

Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.

Conclusion

My advice would fall into two categories:

If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.

If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.

Hope that's helpful!

Modernizr+html5shiv VS ie9.js

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.

Modernizr - html5shiv w/printshiv

From the description available here,

html5shiv-printshiv.js

This includes all of the above, as well as a mechanism allowing HTML5
elements to be styled and contain children while being printed in IE
6-8.

IE not styling HTML5 tags (with shiv)

With IE, even with the shiv, you need to declare the HTML 5 elements as block elements. I use this line for Internet Explorer, but you can modify it for the elements you need.

header,nav,article,footer,section,aside,figure,figcaption{display:block}

From the Modernizr Documentation:

You’ll also probably want to set many of these elements to display:block;

ie9-js - has something else rendered it obsolete?

ie9.js is still a good piece of code. It does a lot of work, fixing up stuff that IE gets wrong.

As you rightly point out, it is now an old piece of code, but it does still work.

Reasons why people might not be using it so much any more:

• ie9.js is a single large polyfill. That makes it bulky and slow. If you only need to fix certain specific features, it may be overkill; a few smaller patches may be better.
• The bulk of the fixes that ie9.js does are for IE6. Fewer and fewer sites are bothering to support IE6 any more, so all that code is redundant. Again, a few smaller patches may be better.
• ie9.js isn't being actively maintained any more. That's fine, because it does the job it set out to do, but other, newer patches are generating more interest, as much because they're new as for any advantage they may have.

Of the tools you mentioned as alternatives (modernizr, html5shiv, CSS3Pie), none of them actually have any feature cross-over with ie9.js at all. (see also this answer)

However, here are some more recent tools that might be good alternatives to ie9.js:

• jQuery - or one of the other similar libraries. This does a whole lot more than just fix IE's holes, but because it makes a point of cross-browser compatibility, even in IE6, if you're writing jQuery code, there's very little need for the Javascript patches provided by ie9.js
• Selectivzr - this is probably the main one. It's a polyfill for most of the missing CSS selectors that IE doesn't support. ie9.js does a few more (namely relational selectors for IE6 & 7), but Selectivzr uses pre-existing selector engines (your choice of jQuery, Prototype, etc), meaning that it's very fast and also lightweight because it makes use of resources that are already loaded.

Given that the vast majority of JS code in the browser is written using jQuery these days, this basically reduces the need for an all-encompassing IE-fixer patch like ie9.js down to virtually zero.

However, if you're not using jQuery or a similar library, then you may find ie9.js can still work for you very well.

---

Related Topics