Die Macht von Polyfills: IE8 & Bootstrap

Vor kurzem mussten wir im Rahmen eines Projektes eine Webanwendung entwickeln, welche mit dem Internet Explorer 8 kompatibel sein musste. Zusätzlich war es nicht möglich, einen serverseitigen Code zu deployen, sodass die gesamte Funktionalität mit JavaScript abzudecken war. Wie wir trotzdem aktuelle Funktionen nutzen konnten, möchte ich in diesem Beitrag beleuchten.

Polyfills

Bei Polyfills handelt es sich um Funktionalitäten, die man in älteren Browsern nachladen kann, um die Funktionalität von modernen Browsern auch in älteren Browsern zu emulieren. Hierbei kann es sich z.B. um Media Queries handeln oder eine Funktionalität für die Arbeit mit Binärdateien.

Diese Funktionalitäten werden meistens in JavaScript implementiert, sodass sich das Nachladen als sehr einfach gestaltet. Hier ist es auch möglich, die Funktionalitäten browserabhängig zu laden, sodass die Polyfills nur in Browsern geladen werden, wo es wirklich benötigt ist.

Ein Beispiel: Internet Explorer 8 und Bootstrap

Bei der Umsetzung des oben erwähnten Projektes war bereits bekannt, dass in wenigen Monaten ein modernerer Internet Explorer ausgerollt wird. Der dort vorhandene SharePoint 2010 wird auf einen SharePoint 2013 migriert. Aus diesem Grund war es wichtig, das Projekt zukunftssicher zu implementieren und eine Migration auf neuere Technologien einfach zu gestalten.

Durch die Nutzung der JSOM-API des SharePoints war eine Migration auf eine neuere SharePoint Version sehr einfach. Durch Polyfills wiederum war es möglich, auch moderne Bibliotheken, wie Bootstrap, zu nutzen.

Auf die JSOM-API möchte ich in diesem Beitrag nicht näher eingehen, da dies nicht im Fokus liegt. Weitere Informationen zu JSOM findet man hier: https://msdn.microsoft.com/en-us/library/office/dn268594.aspx

Zurück zu Bootstrap und IE8. So sieht beispielsweise ein Modaler Dialog im Internet Explorer 8 ohne ein Polyfill aus:

Wie man hier sehen kann, ist der Modale Dialog deutlich zu breit. Ebenfalls ist es im Internet Explorer 8 nicht möglich, ein mehrspaltiges Design mithilfe des Bootstrap Grids umzusetzen. Dies resultiert daraus, dass der Internet Explorer 8 keine Media Queries oder moderne HTML 5 Elemente unterstützt.

Für Media Queries kann Respond.JS als Polyfill genutzt werden. Hierfür muss lediglich die respond.min.js Datei von Github heruntergeladen und auf der Webseite eingebunden werden. Dabei ist wichtig, dass die Javascript Datei nach den CSS Dateien eingebunden wird.

Neben Respond.JS können über html5shiv moderne HTML 5 Elemente genutzt werden. Genauso wie auch Respond.JS, muss hier einfach html5shiv.min.js eingebunden werden.

Nachdem diese beiden Polyfills eingebunden sind, sieht der Dialog wie gewohnt wie folgt aus:

Fazit

Möchte man einen Zeitraum mit alter Technologie überbrücken, aber doch zukunftsfähig sein, dann bieten die Polyfills hier einen Vorteil. Das einfache Einbinden ermöglicht für ältere Browser die benötigte Unterstützung. Neue Browser laden bei vorhandenen Funktionalitäten die Polyfills nicht, sodass beide Welten problemlos bedient werden können.

Haben Sie Fragen zu diesem Artikel oder brauchen Sie Unterstützung?

Nehmen Sie mit uns Kontakt auf!

Wir unterstützen Sie gerne bei Ihren Vorhaben!