What are Polyfills?

Since few days i have been hearing a term Polyfills everywhere, can anyone please tell me what is it.

A Polyfill is a javascript code that acts as a fallback to imitate modern functionality in older browsers that natively do not support such features. For example, if you want to embed a video on your website, you would use HTML5 <video> tag. This is compatible with every modern browser. However, older legacy browsers like Internet Explorer 8 and its previous versions do not support <video> feature. To make sure that any user still using these browsers are not excluded from viewing such content, we use a popular polyfill called mwEmbed Video Player. For Canvas the most popular polyfill is FlashCanvas, for SVGs – svgweb, for audio – SoundJS etc.

Loading Polyfills Using JavaScript

As discussed earlier, apart from performing javascript tests for browser support, Modernizr can also be used to conditionally load polyfill/shim scripts to provide functionality when a browser lacks feature support. This is achieved by the use of Modernizr.load() method.

Modernizr.load

Modernizr.load method is a conditional loader based on an extremely popular yesnope.js library which loads JavaScript files based on the result of a feature detection test. For example, we can use modernizr.load method to test for the availability of support for flexbox and load a polyfill if the browser does not support it.

If the browser supports flexbox, flexlayout .css file will be loaded otherwise in case of lack of support, matchHeight.js polyfill will be loaded which imitates the flexbox feature in older browsers.

Modernizr.load({
 test: Modernizr.flexbox,
 yep : 'flexlayout.css',
 nope: 'matchHeight.js' });

Modernizr.load() takes the property defining a feature as an argument and performs a test to check its support. If the property is supported and test succeeds, the “yep” case script is loaded. If the property isn’t supported and the test fails, the “nope” case script is loaded. If a script is to be loaded regardless of whether the test fails or not – “both” case. For example –

Modernizr.load({
 test: Modernizr.canvas,
 yep: 'Canvasavailable.js',
 nope: 'FlashCanvas.js',
 both: 'CustomScript.js'
});

Modernizr.load() can also be used in cases where you want to create a fallback in case Google or Microsoft CDN networks are not accessible which can wreck your entire webpage. Without CDN the jquery or bootstrap scripts will not load if you included them using CDN links. The following example shows how to create a backup for loading jquery if CDN fails. It will first attempt to download jQuery from Google CDN, the use the function corresponding to “complete” case to check if jQuery is present or not. If jQuery is absent because it couldn’t be downloaded from Google CDN, “load” case will load the backup jquery from your local storage


Modernizr.load([
 {
 load: '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
 complete: function () {
 if (!window.jQuery) {
 Modernizr.load('js/libs/jquery/3.3.1/jquery.min.js');
 }
 }
 },
 {
 // execute this if jquery couldn’t be loaded.
 load: 'backup-jquery.js'
 }
]);

Original Source: https://www.lambdatest.com/blog/feature-detection-with-modernizr-for-cross-browser-compatibility/