3

There's a few questions that cover this, but none of them address all the libraries/issues I'm wondering about. There are lots of scripts out there and I'm confused as to which does exactly what, and what kind of performance concerns come with each.

Here's where I'm at with my current understanding:

  • Respond.js: mediaquery support back to IE6.
  • Selectivizr: CSS selectors and pseudo-selectors?
  • HTML5shiv: Adds HTML5 elements back to IE6
  • CSS3Pie: Adds certain css3 proprties back to IE6: border-radius, box-shadow, linear-- gradients.
  • IE9.js: png transparencies back to IE5.5, 'many other html/css issues'???
  • Modernizr: As I understand, it's detection for advanced feature support and it's up to you what to do when features are/aren't detected. Though I understand it adds HTML5 elements for all browsers
  • HTML5 Boilerplate: css normalizer, not really sure what else and how it relates to others.
  • Head.js: Website claims it does everything, but I'm not really sure what it does beyond its method of loading js that's allegedly vastly superior (I guess to me it seems a bit too good to be true).

The first 4 I'm pretty sure I understand, the latter 4 I'm a bit fuzzier on what it is exactly they do. I'd also be curious to know how reliable they are and how they'd affect page load etc, as well as whether changes would need to be made to html and css.

I'm curious about a lot of different behaviours I know there are compatability issues with and whether the larger amalgamated libraries offer any support for them: css3-selectors/classes (does that include hovering on things other than links for example?), transparent pngs, media-queries, html5 elements (and what about audio and video)?

This is an awfully complicated question I realize. I wonder if there's a good resource that breaks this all down? Otherwise I'm curious to know how these different tools stack up to eachother in terms of what they cover (I know, for instance, that you don't need html5shiv if you have modernizr, but I don't know about other crossover issues), and if there's any important tools I've missed.

Community
  • 1
  • 1
Damon
  • 10,493
  • 16
  • 86
  • 144

1 Answers1

3

The best list of these things that I know of is maintained by the guys who write Modernizr.

They have a page on their Wiki which lists virtually every known "polyfill" (as they're known). See here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Bear in mind that no matter how clever these hacks are, there is always going to be the fundamental issue that they are trying to force the browser to do things that it doesn't support. You can generally get away with using one or two of them, but the more you try to do, the worse the performance will get (and IE8 isn't exactly quick in the first place!)

Also, of course, most of them are only going to give approximations of the real functionality. Most of them have shortcomings and issues which simply can't be avoided (the CSS3Pie site's "known issues" page is a good example of this).

Spudley
  • 166,037
  • 39
  • 233
  • 307