More on Front End Web !

What are Polyfills in Javascript ?

By on Sep 5, 2013 in Javascript, Web | 1 comment

With HTML5 getting popular, a large number of developers have moved on to HTML5 based development. It has indeed helped developers to implement extra features as well as save a lot of time during development too. But one of the most common issues of web development, Cross-Browser compatibility, still exists. Older browsers do not support many of HTML5 related functionality.
As a result, to bridge this gap between HTML5 supporting browsers and older browsers, Polyfills were developed by web developers around the world.

So what exactly is a polyfill?

Lets look at the definition :

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

This means that HTML5 and CSS3 functionality like “placeholder“, “Canvas”, “video”, “transform” etc can be used even on an old browser. So while developing your web page you just need to code it using the modern functionality and the older browsers will now either have the new functionality available or automatically add a fallback version without you bothering much about it.

Over the time a large number of Polyfills have been developed. You can find varieties of polyfill for a certain functionality on the internet. Though there is a very good list of Polyfills available on GitHub at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills.

So have fun trying out Polyfills. Do let us know your experience with various polyfills.

 

    1 Comment

  1. The definition given here of a polyfill is correct, yet a part of the picture is missing :
    When a new feature is being developed and is not yet a standard, browser vendors will prefix the name of the feature to emphasize the fact it is still experimental, and may behave in a specific way. The prefixes will be webkit, moz, op, and ms, for (Chrome, Safari), Firefox, Opera, and I.E. respectively. Typically, differences in behavior are small or null.
    The purpose of a polyfill for a not-yet standard feature is to 1) get a single non-prefixed name for this feature and 2) ensure the same behavior whatever the (often minor) differences that exist across browsers.
    While doing such a normalisation polyfill, one often also provide a fallback for old browser that do not implement the feature at all.

    example : requestAnimationFrame is a function used to animate.
    If you write :

    requestAnimationFrame ( myDrawFunction ) ;

    It will callback myDrawFunction next time the screen is ready to paint, providing as first argument the time when the callback was performed.

    Polyfill :


    function polyfillRequestAnimationFrame() {
    // return if feature is supported
    if (window.requestAnimationFrame) return;
    // detect a prefixed version of the feature
    var w = window;
    var found = w.webkitRequestAnimationFrame || w.msRequestAnimationFrame
    || w.mozRequestAnimationFrame || w.oRequestAnimationFrame;
    if (found) {
    // install prefixed version if found
    window.requestAnimationFrame = found;
    } else {
    // if not found (old browsers) provide fallback
    window.requestAnimationFrame = function (cb) {
    function callbackWithTimeAsArgument() {
    cb(Date.now());
    }
    setTimeout(callbackWithTimeAsArgument, 1000 / 60);
    };
    }
    }

    gameAlchemist

    May 20, 2014

Post a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">