Ployfill, html5shiv, es5-shim and Modernizr

A polyfill basically is a browser fallback piece of code which makes the modern browser based functionality available in older browsers too.

According to wiki, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape. For example, many features of HTML5 are not supported by versions of Internet Explorer older than version 8 or 9, but can be used by web pages if those pages install a polyfill. html5shiv and es5-shim are related concepts. e.g the following codes are polyfill codes in case of Object.create is not defined in older browser:

if (typeof Object.create != 'function') {
  Object.create = (function() {
    var Object = function() {};
    return function (prototype) {
      if (arguments.length > 1) {
        throw Error('Second argument not supported');
      }
      if (typeof prototype != 'object') {
        throw TypeError('Argument must be an object');
      }
      Object.prototype = prototype;
      var result = new Object();
      Object.prototype = null;
      return result;
    };
  })();
}

es5-shim and html5shiv

• HTML5 Shiv: enable use of HTML5 sectioning elements in legacy Internet Explorer. The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. It is available at https://github.com/afarkas/html5shiv
• es5-shim: ECMAScript 5 compatibility shims for legacy JavaScript engines es5-shim.js monkey-patch a JavaScript context to contain all EcmaScript 5 methods that can be faithfully emulated with a legacy JavaScript engine. It is available at: https://github.com/es-shims/es5-shim.

Modernizr vs. html5shiv

They do different things.

• Modernizr detects the availability of features in a page allowing you to provide your own polyfills for older browsers should you require that functionality. You can add support for using a canvas tag polyfill so that canvas functionality, including it’s JavaScript interface, in browsers that don’t support the tag.
• Html5shiv adds the new html5 tags that aren’t available (
  ,

  , etc) to older browsers. It also creates the default styles (display: block for

  for example). .

Some helpful links:

• http://html5please.com/
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills