Polyfills: Code-Bausteine für moderne Web-Features
Wenn es um den Browser für den täglichen Webbesuch geht, setzen viele Nutzer auf Tradition: Die gewohnte Oberfläche und eine über die Jahre aufgebaute Sammlung an Favoriten sind für viele User ausschlaggebende Argumente, um dem schon immer verwendeten Webclient die Treue zu halten. Auch dem Thema Updates wird nicht immer die eigentlich angemessene Bedeutung zugemessen, weshalb Sie damit rechnen können, dass viele Besucher Ihr Webprojekt mit Browsern ansteuern, die moderne Webfeatures wie HTML5-Elemente oder SVG-Grafiken nicht unterstützen.
Damit Sie auch diese Nutzer abholen können, empfiehlt sich der Einsatz sogenannter Polyfills. Diese praktischen Code-Bausteine machen neuere Features wie die genannten auch in Internetbrowsern nutzbar, denen die native Unterstützung dieser Komponenten eigentlich fehlt. Was genau ein Polyfill ist und wie Sie diese Technologie verwenden können, erfahren Sie in diesem Artikel.
Was ist Polyfill?
Als Polyfill oder auch Polyfiller bezeichnet man einen mehr oder weniger umfangreichen Code-Baustein, der moderne HTML-, CSS- oder JavaScript-Funktionen in älteren Browsern verfügbar macht, denen die Unterstützung von Haus aus fehlt. In den meisten Fällen ist ein Polyfill in JavaScript geschrieben – grundsätzlich 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 bzw. -unabhängig verfügbar werden, gehören HTML5-Komponenten wie das Bitmap-basierte Canvas-Element für Grafiken, Diagramme und Animationen.
Der Begriff „Polyfill“ leitet sich von der in Großbritannien weit verbreiteten Marke Polyfilla ab, hinter der eigentlich eine Spachtelmasse für Renovierungs- und Sanierungsarbeiten steckt. In der Füllmasse sah der Webentwickler Remy Sharp aufgrund ihrer Funktion, Löcher in Wänden zu füllen, den passenden Vergleich für die praktischen Workaround-Codes, weshalb er diesen 2009 in seinem mit Bruce Lawson geschriebenen Buch „Introducing HTML5“ entsprechenden Namen gab. Nachfolgend wurde Polyfill als offizielle Bezeichnung übernommen.
Welche Polyfills gibt es?
Dass der Begriff Polyfill eng an HTML5 geknüpft ist, ist kein Zufall: Mit seinen fortschrittlichen Features, die unter anderem die Notwendigkeit von Flashvideos passé gemacht haben, hat sich die fünfte Version der Hypertext Markup Language schnell zu einer festen Größe im Web entwickelt. Hinsichtlich der HTML5-Unterstützung durch die Browser verlief die Entwicklung allerdings relativ schleppend und selbst die neuesten Editionen haben den modernen Markup-Standard häufig immer noch nicht vollständig implementiert. Neben den Polyfills für HTML5-Elemente sind Polyfill-Code-Bausteine unter anderem auch bei der Einbindung folgender Web-Elemente gefragt:
- SVG-Grafiken: Das SVG-Format (Scalable Vector Graphics) wird zwar bereits seit 2001 vom W3C-Konsoritum als Format für die Einbindung von Vektorgrafiken empfohlen, ist aber erst seit HTML5 auf dem Vormarsch. Da viele Browser bei der Unterstützung hinterherhinken, gibt es SVG-Polyfills wie svgweb.
- ECMAScript: ECMAScript ist der als Standard deklarierte Sprachkern von JavaScript, der regelmäßige Überarbeitungen erfährt, um den Funktionsumfang der Skriptsprache Stück für Stück zu erweitern. Die neuesten Features wie Promise-Objekte oder Symbol-Funktionen funktionieren dank Polyfills der JavaScript-Standardbibliothek core-js auch in älteren Browserversionen.
- Web Storage: Auch die Cookie-Alternativen Local Storage (dauerhafte Speicherung auf Client-Seiten) und Session Storage (Speicherung auf aktuelle Sitzung beschränkt), die sich unter dem Oberbegriff Web Storage oder DOM Storage zusammenfassen lassen, werden nicht von allen Browser-Versionen unterstützt. Ein bekanntes Polyfill, das zur Behebung dieses Problems geschrieben wurde, ist das MIT-lizenzierte webstorage-polyfill.
- Cross-Origin Resource Sharing (CORS): CORS erlaubt Webanwendungen den Zugriff auf Web-Ressourcen, die außerhalb des eigenen Servers liegen. Viele ältere Browser unterstützen diesen Datenaustausch nicht. Abhilfe schafft eine Kombination aus dem JavaScript-Paket XDomain und dem CORS-Polyfill XHook.
- CSS (Cascading Style Sheets): CSS ist seit Jahren eines der wichtigsten Werkzeuge zur grafischen Gestaltung von Websites. Im Laufe der Jahre sind die Stylesheets immer vielseitiger geworden, weshalb Polyfills als Schnittstelle zu älteren Browser-Modellen sehr gefragt sind. Eines der bekanntesten Workaround-Werkzeuge ist css-polyfills.js.
- Geolocation: Das Geolocation-API zum Übermitteln des eigenen Standorts war lange Zeit nur mithilfe zusätzlicher Browser-Plug-ins nutzbar und wurde nicht standardmäßig von den Browsern unterstützt. Will man die Funktion auch für Nutzer älterer Webclient-Versionen ohne Erweiterung verfügbar machen, kann man das ebenfalls mit einem Polyfill erreichen.
Wie werden Polyfills angewendet (inkl. Beispiel)?
Polyfill-JavaScript-Code bzw. Polyfill-Skripte im Allgemeinen lassen sich direkt in das HTML-Dokument eines Webprojekts einbetten. Dabei integrieren sie sich nahtlos in den bestehenden Quellcode und werden bei korrekter Programmierung nur dann ausgeführt, wenn der zugreifende Browser das jeweilige Webfeature tatsächlich nicht unterstützt. Zu diesem Zweck wird in JavaScript beispielsweise die if-Anweisung verwendet, mit deren Hilfe sich der fehlende Support als Bedingung für die Aktivierung des Skripts definieren lässt. Wie genau dies im Code festzuhalten ist und wie der Aufbau eines Polyfills im Allgemeinen aussieht, verdeutlichen die folgenden zwei Beispiele.
Beispiel 1: Polyfill für die JavaScript-Methode „startsWith()“
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
Dieses kleine JavaScript-Snippet ermöglicht dem aufrufenden Browser, die JavaScript-Methode „startsWith()“ zu nutzen, auch wenn er diese eigentlich nicht unterstützt. Diese Methode, die Teil der ECMAScript-6-Spezifikation ist, stellt fest, ob ein bestimmter String mit den Zeichen bzw. der Zeichenfolge eines anderen Strings beginnt. Ist dies der Fall, gibt sie den Wert „true“ (trifft zu), andernfalls den Wert „false“ (trifft nicht zu) zurück. Die erste Zeile des Codes sorgt dabei dafür, dass das Skript nicht genutzt wird, falls der Browser die Methode nativ unterstützt.
Eine komplexere, optimierte Polyfill-Variante zur Einbindung der „startsWith()“-Methode hat der Entwickler Mathias Bynens bei GitHub zur Verfügung gestellt.
Der aufgezeigte Code funktioniert nicht, wenn der zugreifende Webclient JavaScript blockiert bzw. diese Skriptsprache in den Einstellungen deaktiviert ist.
Beispiel 2: Web-Storage-Polyfill
Das zweite Polyfill-JavaScript-Beispiel präsentiert eine einfache Code-Lösung, die Local bzw. Session Storage in allen älteren Browsermodellen verfügbar macht.
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');
})();
Bei dem aufgeführten Code handelt es sich um einen Immediately Invoked Function Expression (IIFE), also einen sofort ausgeführten Funktionsausdruck. Bevor der Browser diesen lädt, wird allerdings wie beim ersten Beispiel – per if-Anweisung in der ersten Codezeile – überprüft, ob der Client die Web-Storage-Technologien nativ unterstützt. Falls dies der Fall ist, gibt es für die if-Anweisung den Rückgabewert „false“ (trifft nicht zu), da Typen für Local und Session Storage definiert sind. Die Konsequenz: Der Polyfill wird verworfen.
Ähnliche Artikel
Die beliebtesten JavaScript-Frameworks und -Bibliotheken
Wer schon einmal mit JavaScript an einer Webseite gearbeitet hat, weiß um die Komplexität des sogenannten Document Object Models (DOM). Eine einfachere Bedienung versprechen JavaScript-Frameworks und -Bibliotheken: Mit einer Sammlung nützlicher Funktionen und Vereinfachungen greifen sie Entwicklern unter die Arme. Doch welche sind die besten JavaScript-Bibliotheken und -Frameworks? Und worin…
HTML lernen: Die ersten Schritte mit der Standard-Websprache
In Zeiten von Content-Management-Systemen und Homepage-Baukästen entsteht schnell der Eindruck, dass es reine Zeitverschwendung sei, HTML zu lernen. Doch spätestens, wenn eine Seite aus unerkenntlichen Gründen nicht mehr funktioniert oder wenn dynamische Elemente eingebaut werden sollen, kommen Sie ohne Kenntnisse in der Websprache nicht mehr weiter. In unserem ausführlichen HTML-Tutorial stellen…
Was bietet HTML 5.1 an Neuerungen?
Lange hat es gedauert, bis im Herbst 2014 das langersehnte HTML5 erschienen ist. Jetzt ist mit HTML 5.1 gleich das erste Update zum neuen Web-Standard fertig. Dabei gibt es zahlreiche Änderungen: Vor allem die leichtere Anpassung an ein responsives Webdesign steht wieder im Mittelpunkt. Doch sind nicht nur zahlreiche HTML-Neuerungen hinzugekommen: Einige Elemente und Attribute landeten auch auf…
FlashMovieShutterstock Was ist ein Wrapper in der Programmierung?
Wrapper umhüllen einzelne Programmkomponenten wie Umschläge. Das Hauptprogramm kommuniziert nur mit dem Wrapper, der auf die Schnittstellen der umhüllten Programmteile zugreift. Dieses Vorgehen ermöglicht Software-Entwicklern bei der Verwendung unterschiedlicher Bibliotheken, Datenbanken oder Programmiersprachen bisher nicht vorhandene Kompatibilität.
