Polyfills: Damit moderne Features überall glatt laufen

Inhaltsverzeichnis

Polyfills machen moderne Web-Features auch in jenen Browsern nutzbar, denen die native Unterstützung dieser Komponenten fehlt. Was diese praktischen Code-Bausteine genau ausmacht und wie du diese Technologie einsetzt, erfährst du in diesem Artikel.

Was ist ein Polyfill?

Als Polyfill oder Polyfiller bezeichnet man einen Code-Baustein, der aktuelle HTML-, CSS- oder JavaScript-Funktionen in älteren Browsern bereitstellt, die diese nicht von Haus aus unterstützen. Meistens ist ein Polyfill in JavaScript geschrieben – prinzipiell sind aber auch andere Web-Programmiersprachen als Basis für diese „Füll“-Skripte möglich. Zu den wichtigsten Features, die durch Polyfills browserübergreifend verfügbar gemacht werden, zählen HTML5-Komponenten wie das Canvas-Element für Grafiken, Diagramme und Animationen.

Hinweis

Der Begriff „Polyfill“ leitet sich von der britischen Marke Polyfilla ab, einer Spachtelmasse für Renovierungsarbeiten. Da diese Masse Löcher in Wänden stopft, sah der Webentwickler Remy Sharp darin den perfekten Vergleich für die praktischen Workaround-Codes. Er prägte den Begriff 2009 in seinem Buch „Introducing HTML5“ (gemeinsam mit Bruce Lawson). Danach etablierte sich Polyfill als offizielle Bezeichnung.

Welche Polyfills gibt es?

Dass der Begriff eng mit HTML5 verknüpft ist, kommt nicht von ungefähr: Mit seinen Fortschritten, die etwa Flash-Videos überflüssig machten, wurde die fünfte Version von HTML schnell zum Standard. Die HTML5-Unterstützung durch die Browser verlief anfangs jedoch schleppend. Neben Polyfills für HTML5-Elemente sind solche Code-Bausteine vor allem bei folgenden Web-Elementen gefragt:

SVG-Grafiken: Das SVG-Format (Scalable Vector Graphics) ist seit 2001 W3C-Standard für Vektorgrafiken, verbreitete sich aber erst mit HTML5. Da viele Browser anfangs Probleme hatten, gibt es Polyfills wie svgweb.
ECMAScript: Als standardisierter Kern von JavaScript wird ECMAScript laufend aktualisiert. Neueste Features wie Promise-Objekte laufen dank Polyfills aus der Bibliothek core-js auch in betagten Browserversionen.
Web Storage: Die Cookie-Alternativen Local Storage und Session Storage werden nicht von jedem Browser unterstützt. Ein bekanntes Hilfsmittel hierfür ist das MIT-lizenzierte webstorage-polyfill.
Cross-Origin Resource Sharing (CORS): CORS erlaubt den Zugriff auf Ressourcen außerhalb des eigenen Servers. Ältere Browser blockieren dies oft. Hilfe bieten hier Pakete wie XDomain in Kombination mit XHook.
CSS (Cascading Style Sheets): Stylesheets sind für das Design von Websites essenziell. Da CSS immer komplexer wird, sind Polyfills als Brücke zu alten Browsern sehr beliebt. Ein bekanntes Tool ist css-polyfills.js.
Geolocation: Die Standort-Übermittlung via Geolocation-API brauchte früher oft Plugins. Mit einem Polyfill stellst du diese Funktion auch Nutzer:innen alter Browser zur Verfügung, ohne dass diese Erweiterungen installieren müssen.

Wie werden Polyfills angewendet (inkl. Beispiel)?

Du kannst Polyfill-Skripte direkt in das HTML-Dokument einbetten. Sie fügen sich nahtlos in den Quellcode ein und werden nur dann aktiv, wenn der Browser ein Feature tatsächlich nicht unterstützt. In JavaScript nutzt man dafür oft die if-Anweisung, um den fehlenden Support als Bedingung festzulegen. Wie ein solcher Aufbau eines Polyfills aussieht, zeigen die folgenden Beispiele.

Beispiel 1: Polyfill für die Methode `startsWith()`

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

javascript

Dieses Snippet ermöglicht die Nutzung der JavaScript-Methode startsWith(), auch wenn der Browser diese nicht nativ beherrscht. Die Methode prüft, ob ein String mit einer bestimmten Zeichenfolge beginnt und gibt „true“ oder „false“ zurück. Die erste Codezeile stellt sicher, dass das Skript ignoriert wird, falls der Browser die Funktion bereits kennt.

Eine optimierte Version dieser startsWith()-Methode findest du beim Entwickler Mathias Bynens auf GitHub.

Hinweis

Der Code funktioniert nur dann, wenn JavaScript im Browser der Nutzer:innen aktiviert ist.

Beispiel 2: Web-Storage-Polyfill

Dieses Beispiel zeigt eine Lösung, um Local bzw. Session Storage in alten Browsern verfügbar zu machen.

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');
    })();
}