# Wat zijn polyfills?

**Polyfills** zijn codecomponenten die nieuwere webfuncties bruikbaar maken in browsers die dergelijke functies niet standaard ondersteunen. In dit artikel wordt uitgelegd wat deze praktische **codecomponenten** zijn en hoe u ze kunt gebruiken.

## Wat zijn polyfills en in welke talen kunnen ze worden geschreven?

Een polyfill, ook wel polyfiller genoemd, is een codeblok van verschillende complexiteit dat moderne HTML-, CSS- of JavaScript-functies beschikbaar maakt in oudere browsers die deze niet standaard ondersteunen. De meeste polyfills zijn geschreven in JavaScript, maar ook andere webprogrammeertalen kunnen als basis dienen voor fillerscripts. Enkele van de belangrijkste functies die polyfills beschikbaar maken in verschillende webbrowsers zijn HTML5-componenten zoals de op bitmaps gebaseerde canvaselementen voor afbeeldingen, grafieken en animaties.

Opmerking De term ‘polyfill’ is afgeleid van het populaire Britse merk Polyfilla, een vulmiddel voor renovatie- en restauratiewerkzaamheden. Webontwikkelaar Remy Sharp zag een passende vergelijking tussen de **vulstof** en deze handige **workaround-codes**, aangezien beide bedoeld zijn om hiaten op te vullen. Bij deze laatste zijn de hiaten die moeten worden opgevuld hiaten in de functionaliteit van de browser. Het concept werd bedacht in Sharps boek ***Introducing HTML5*** uit 2009, dat hij samen met Bruce Lawson schreef. Polyfill werd vervolgens de officiële benaming voor dergelijke codecomponenten.

## Welke soorten polyfills zijn er?

Het feit dat de term polyfill nauw verbonden is met **HTML5** is geen toeval. Met zijn geavanceerde functies, die onder andere de noodzaak van flashvideo’s *overbodig* hebben gemaakt, is de vijfde versie van de hypertext markup language een vast onderdeel van het web geworden. De **ondersteuning voor HTML5 in browsers** heeft zich echter vrij langzaam ontwikkeld. Naast de polyfills die voor HTML5-elementen zijn gemaakt, worden **polyfill-codeblokken** ook gebruikt om de volgende webelementen te integreren:

- **SVG-afbeeldingen**: het SVG-formaat SVG (**Scalable** **Vector** **Graphics**), dat het W3C-consortium in 2001 begon aan te bevelen als standaardformaat voor vectorafbeeldingen, werd voor het eerst populair met HTML5. Maar omdat veel browsers dit formaat nog niet ondersteunen, zijn er SVG-polyfills zoals [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: ECMAScript is de gestandaardiseerde kern van JavaScript en wordt regelmatig bijgewerkt om de functionaliteit van de taal uit te breiden. Functies zoals Promise-objecten of Symbol-functies worden in oudere browsers beschikbaar gemaakt via polyfills zoals de JavaScript-standaardbibliotheek [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site").
- **Webopslag**: alternatieven voor cookies zoals **lokale opslag** (langdurige opslag aan de clientzijde) en **sessieopslag** (opslag beperkt tot de huidige sessie), gezamenlijk bekend als webopslag of DOM-opslag, worden niet door alle browserversies ondersteund. De MIT-gelicentieerde [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") is een bekende oplossing voor dit probleem.
- **Cross-Origin Resource Sharing (CORS)**: CORS stelt webapplicaties in staat om toegang te krijgen tot webbronnen die zich buiten de eigen server bevinden. Veel oudere browsers ondersteunen deze gegevensuitwisseling niet. Het JavaScript-pakket [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") en de CORS-polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") kunnen hierbij helpen.
- **CSS (Cascading Style Sheets)**: CSS is al jaren een van de belangrijkste tools voor het ontwerpen van de visuele lay-out van websites. In de loop der tijd zijn stylesheets veelzijdiger geworden, waardoor polyfills populair zijn geworden voor de koppeling met oudere browsers. Een van de bekendste tools is [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geolocatie**: lange tijd werd de Geolocation API (die wordt gebruikt om de locatie van een gebruiker door te geven) niet ondersteund door browsers en kon deze alleen worden gebruikt met behulp van een extra browserplugin. Met een polyfill kunt u deze functionaliteit aanbieden aan gebruikers met oudere browserversies die de API niet native ondersteunen.

Opmerking Om het gebruik van polyfills te vereenvoudigen en te optimaliseren, maken diensten zoals het Polyfill.io-project gebruik van content delivery networks (CDN’s) om de scripts te leveren. Sinds begin 2024 zijn er echter aanzienlijke problemen met **malware die wordt verspreid via de CDN’s die door Polyfill.io worden gebruikt**. Als u deze dienst gebruikt, moet u alle code van het Polyfill.io-project van uw website verwijderen.

## Hoe worden polyfills gebruikt? (Inclusief codevoorbeelden)

Je kunt polyfill JavaScript-code of polyfill-scripts rechtstreeks in het HTML-document van een website insluiten. Deze **worden naadloos geïntegreerd in de bestaande broncode** en worden alleen uitgevoerd als de browser de betreffende webfunctie niet ondersteunt. Dit gebeurt doorgaans met behulp van `if` van JavaScript om te controleren of er ondersteuning ontbreekt. Het ontbreken van ondersteuning kan dan worden omgezet in een voorwaarde voor het activeren van het script. In de volgende twee voorbeelden laten we zien hoe u dit kunt implementeren en laten we u zien hoe de **algemene structuur van een polyfill** eruitziet.

### Voorbeeld 1: Polyfill voor de JavaScript-methode `startsWith()`

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

Met dit kleine JavaScript-fragment kan de oproepende browser de `startsWith()` gebruiken, zelfs als deze niet standaard wordt ondersteund. Deze methode, die deel uitmaakt van de ECMAScript 6-specificatie, controleert of een **tekenreeks begint met het teken of de tekenreeks van een andere tekenreeks**. Als dat het geval is, wordt ‘true’ geretourneerd, anders wordt ‘false’ geretourneerd. Een complexere, geoptimaliseerde versie voor integratie van `startsWith()` vindt u op de [GitHub-pagina van ontwikkelaar Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens").

Opmerking De hier gepresenteerde code werkt niet als de webclient JavaScript blokkeert of de scripttaal in de instellingen heeft uitgeschakeld.

### Voorbeeld 2: Polyfill voor webopslag

Deze JavaScript-polyfill is een eenvoudige codeeroplossing die lokale opslag en sessieopslag beschikbaar maakt in oudere browsermodellen.

```javascript
if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                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;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // 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');
    })();
}
```

De bovenstaande code is een **Immediately** **Invoked** **Function** **Expression**(IIFE). Voordat de browser deze laadt, controleert een `if` in de eerste regel van de code echter of de client de webopslagtechnologieën native ondersteunt. Als dat het geval is, retourneert de `if` een false-waarde, omdat de typen voor lokale en sessieopslag al zijn gedefinieerd. Dit heeft tot gevolg dat de polyfill wordt verwijderd.


This is a markdown version of: [https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/polyfill/](https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/polyfill/) for AI/LLM consumption.