113

I'm looking to build my first HTML5 site and have been looking at working with IE.

There is html5shiv, Dean Edwards ie7-js and then Modernizr. Are these all largely the same? I'm confused about which route to go.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
PaulM
  • 3,281
  • 3
  • 28
  • 38

3 Answers3

124

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thats the answer I was looking for. Thanks :) – PaulM Oct 04 '10 at 13:03
  • 64
    Modernizr essentially includes the whole of html5shiv. – Paul Irish Oct 04 '10 at 15:19
  • Fantastic overview. Certainly gave me some direction as well. Thanks! – ebrandell Nov 28 '12 at 22:08
  • @spudley What do you mean by _"which you can use to change your layout according to what the browser supports..."_ Can you please supply a simple verbose example ? _Thanks_ – Royi Namir Jan 13 '13 at 09:02
  • 2
    @RoyiNamir - Modernizr sets classes in the HTML. It itself does nothing else with those classes, but you may use other JS libs or CSS to reference those classes and do whatever you wish, in the same way as you would for any other class in your HTML code. An example: You want to use a `placeholder` in your input tag. But old IE doesn't support it. Modernizr will add a class `no-placeholder` in IE; you can write Javascript code that references this class so that you can implement a script to mimic the placeholder feature without having it run on browsers that don't need it. Hope that explains it – Spudley Jan 13 '13 at 09:17
  • @Spudley I though it will allow me to write the placeholder attribute (in old IE) and he will put the value by itself via Js ( **psuedu** : _search element which has "placeholder" attribute , and write via (ready) Js code - the value_). I thought **this** is the benefit of using this library........so all it does is creating classes for unknown elements ? ( for referencing them via classes via jquery? ) – Royi Namir Jan 13 '13 at 10:58
  • @RoyiNamir - Modernizr does not implement the compatibility scripts itself; it simply gives you a framework to help those compatibility scripts to work. You still need the polyfill scripts in addition to Modernizr, but Modernizr allows you to only use the polyfill script when it's needed. – Spudley Jan 13 '13 at 12:10
  • @Spudley So if I want to build a site which supports `ie7+` and with `placeholder` , so I to apply the `modernizer js file`and it will scan all unsupported elements/attributes , and he will add an appropriate class , and I have to write the script for if it is not supported....right ? but when page loads , **how will I know** : "should I run my script which simulate the `placeholder`, or `do-nothing` cause it is already supported.......? (_thank you very much for answering_) – Royi Namir Jan 13 '13 at 18:34
  • @RoyiNamir - Yes, that's kinda how it works. Modernizr does a number of things that you can use. The main one is adding the class, but it also includes a "Yes/no" option in the Javascript to load the polyfill script if required -- see [the manual page](http://modernizr.com/docs/#installing) and the `Modernizr.load()` tutorial in particular. Also see this tutorial: http://webdesignernotebook.com/css/how-to-use-modernizr/ (ps: sorry I missed the chat request earlier; I only come on for a few mins at a time) – Spudley Jan 13 '13 at 19:18
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22682/discussion-between-royi-namir-and-spudley) – Royi Namir Jan 13 '13 at 21:37
  • 1
    `IE9.js` does everything html5shiv does as well. – Phil Jun 26 '13 at 08:48
12

Easiest way to start a new HTML5 project is using initializr. It will guide and let you build, download your HTML5 project files.

ZOZ
  • 121
  • 1
  • 3
5

they are somewhat the same, and which way to go is ATM as good a guess either way, and for the record, there's one you missed, http://html5boilerplate.com/ This is sort of a repeat of some years ago when prototype and jQuery were fighting in the same space. I'd personally hazard that jQuery won but for now there's no telling which one of these will win this particular fight. I don't think I could recommend dean edwards ie7-js as it mostly deals with just getting IE7 to act like other more intelligent and likable browsers as opposed to leveraging the whole HTML5 thing as much as the other frameworks.

FatherStorm
  • 7,133
  • 1
  • 21
  • 27
  • 2
    Thanks for mentioning boilerplate. I was going to include this in my question, but I wanted it to be specific to the 3 items in my question, since Modenizer is included in boilerplate. – PaulM Oct 04 '10 at 13:03
  • 1
    You are incorrect about what html5boilerplate is, html5boilerplate is a package containing what you need to start a web project, such as initializr, at some point in older versions of html5boilerplate and even perhaps now, it would explain that you should use modernizr or html5shiv and not use both, as modernizr does what you need, also you should download a custom modernizr for your production environment and use only what you need, if you are not going to use the classes modernizr supplies then your should stick to html5shiv! – Neo Mar 06 '14 at 10:07
  • html5boilerplate has changed pretty dramatically since this question was asked in 2010 and now. it did then, what was wanted in the question asked then, bundled everything you needed to start a HTML5 project. the original question was 'I'm looking to build my first HTML5'. I still believe that html5boilerplate was an acceptable alternative option for the question asked at the time it was asked. – FatherStorm Sep 24 '14 at 20:41