With HTML5 and JavaScript getting popular, a large number of developers have moved on to HTML5 and JavaScript 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, i.e Cross-Browser compatibility, still exists. Older browsers do not support many HTML5 and JavaScript related functionalities.
As a result, to bridge this gap between modern browsers and older browsers, Polyfills were developed by web developers around the world.
So what exactly is a polyfill?
Let us 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.
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 that 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 normalization polyfill, one often also provides a fallback for older browsers that do not implement the feature at all.
Thanks to gameAlchemist for the para above.
Over 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.
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); }; } }