Polyfill

When it comes to using a browser for everyday website visits, many users rely on what they know. For many users, the same familiar interface and a collection of favorites accumulated over the years are decisive arguments for remaining loyal to their web client. The subject of updates is not always assigned adequate importance either, which is why you can be certain that many visitors to your web project use browsers that do not support cutting-edge web features such as HTML5 elements or Scalable Volume Graphics (SVG).

So that you can receive visits from these users, the use of so-called polyfills is recommended. These practical code components enable the use of newer features for which native support is lacking in Internet browsers (such as the above-mentioned). This article explains what exactly polyfill is and how this technology can be used.

Contents

What is Polyfill?
What types of Polyfill are there?
How are polyfills used (including example)?
1. Example 2: web storage Polyfill

What is Polyfill?

Polyfill, or even Polyfilla, is any code component that makes cutting-edge HTML, CSS or JavaScript functions available in older browsers that inherently lack support. In most cases, a polyfill is written in JavaScript. In principle, however, other web programming languages can be used as a basis for this “filler” script. HTML5 components such as the bitmap-based canvas element for graphics, diagrams, and animations are among the most important applications for polyfill in browsers.

Note

The term “polyfill” is derived from the popular British brand Polyfilla, which is actually a filling compound for renovation and restoration work. Traditionally used to fill holes in walls, web developer Remy Sharp saw in the filler a suitable comparison for useful workaround codes, which is why in 2009 it was given the corresponding name in “Introducing HTML5,” the book he wrote with Bruce Lawson. Polyfill was subsequently accepted as the official designation.

What types of Polyfill are there?

The fact that the term polyfill is closely associated with HTML5 is no coincidence. With its advanced features that have rendered, among other things, the necessity of flash videos passé, the fifth version of the hypertext markup language has become a permanent feature of the web. With regard to HTML5 support via browser, however, development has been slow and even the latest editions often have not completely implemented the cutting-edge markup standard. In addition to polyfills for HTML5 elements, polyfill code components, among others, are also in demand for integrating the following web elements:

SVG: As early as 2001, the W3C Consortium recommended SVG (Scalable Vector Graphics) as the format for integrating vector graphics and it’s been on the rise since HTML5. But because many browsers are lagging behind in their support, there is SVG polyfill and SVG Web.
ECMAScript: ECMAScript is the declared standard language core for JavaScript, which regularly undergoes revisions in order to gradually expand the functional scope of the script language. The most recent features, such as promise objects or symbol functions, operate in older browser versions and thanks to core-js, the standard library JavaScript polyfill.
Web Storage: Even the local storage (long-term storage on client pages) and session storage (storage limited to the current session) cookie alternatives, which can be combined under the umbrella terms of web storage or DOM Storage, are not supported by all browser versions. A well-known polyfill that was written to eliminate this problem is the MIT-licensed webstorage polyfill.
Cross-Origin Resource Sharing (CORS): CORS enables web applications to access web resources that are located outside of one’s own server. Many older browsers do not support this data exchange. The workaround creates a combination from the XDomain JavaScript package and the CORS polyfill XHook.
CSS (Cascading Style Sheets): CSS for years has been one of the most important tools for designing website graphics. Over time, the stylesheets have become more and more versatile, which is why polyfills are in high demand as an interface for older browser models. One of the best-known workaround tools is css-polyfills.js.
Geolocation: The geolocation API for transmitting one’s location for a long time was only usable with the help of an additional browser plug-in, and was not supported by browsers. If you plan to make the function available to users of older web client versions that do not have an extension, then you can manage this with polyfill.

How are polyfills used (including example)?

In general, polyfill JavaScript code or polyfill scripts can be embedded directly into a web project’s HTML document. In doing so, they are integrated seamlessly into the existing source code and are only executed in proper programming if the accessing browser for the particular web feature is in fact not supported. For this purpose, the if-command (for example) is used in JavaScript, which can be used to define the lacking support as a condition for activating the script. In the following two examples, we illustrate how closely this should be adhered to in the code and what a polyfill structure generally looks like.

Example 1: Polyfill for the JavaScript method “startsWith()”

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function (searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}

This small JavaScript snippet enables the retrieving browser to utilize the “startsWith()” JavaScript method, even if it doesn’t actually support it. Part of the ECMAScript 6 specification, this method determines whether a specific string begins with the character or character series of another string. Should this be the case, it returns the “true” value, otherwise it returns “false”. As a result, the code’s first line ensures that the script is not used in the event where a browser does not natively support the method.

A more complex, optimized version for integrating the “startsWith()” method has been made available on GitHub by developer Mathias Bynens.

Note

The demonstrated code doesn’t work if the accessing web client blocks JavaScript or if the script language is deactivated in the settings.

Example 2: web storage Polyfill

The second polyfill JavaScript example presents a simple code solution, which makes local or session storage available in all older browser models.

if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {
// Define the storage type (local or session)
var Storage = function (type) {
	// Define the storage type (local or session)
	function setData(data) {
		// Sets the data into storage
	}
	function clearData() {
		// clears data from storage
	}
	return {
		length: 0,
		clear: function () {
			clearData();
		},
		getItem: function (key) {
			return data[key] === undefined ? null : data[key];
		},
		key: function (i) {
			var ctr = 0;
			for (var k in data) {
				if (ctr == i) return k;
				else ctr++;
			}
			return null;
		},
		removeItem: function (key) {
			delete data[key];
			this.length--;
			setData(data);
		},
		setItem: function (key, value) {
			data[key] = value + '';
			this.length++;
			setData(data);
		}
	};
};
// Set the local and session storage properties inside the window 
// object
if (typeof window.localStorage == 'undefined') window.localStorage = new Storage('local');
if (typeof window.sessionStorage == 'undefined') window.sessionStorage = new Storage('session');
})();

The specified code involves an Immediately Invoked Function Expression (IIFE). Before the browser loads this, however, an if-command in the first code line (as in the first example) checks whether the client natively supports the web storage technologies. Should this be the case, the “false” return value for the if-command discards the polyfill, because types are defined for local and session storage.