Media Queries im Internet Explorer 8

Auch im Jahre 2013 sollte noch auf die Abwärtskompatibilität einer Webseite bis zum Internet Explorer Version 8 geachtet werden. Heute will ich kurz darauf eingehen, was bei der Verwendung von Media Queries, HTML5, Twitter Bootstrap 3 beim Internet Explorer 8 zu beachten ist, damit auch in diesem Browser die Webseite responsive dargestellt wird und so aussieht, wie in den aktuellen Browsern.

Warum IE8 unterstützen?

Laut Statistik wird diese Browserversion noch von ca. 7 % genutzt. Das hat auch den Grund, dass der IE8 mit Windows 7 schon vorinstalliert ist und Gewohnheitssurfer diesen trotz Browserwahl nutzen. Zudem ist es auch die letzte Internet Explorer Version, welche unter Windows XP unterstützt wird. Auch wenn der Support für Windows XP 2014 endet, kommt noch auf vielen Rechnern das Betriebssystem zum Einsatz.

Das Problem

Der Internet Explorer 8 unterstützt zwei wichtige Webstandards nicht: Media Queries (1) und neue HTML5 Elemente (2). Eine auf z.B. Twitter Bootstrap 3 entwickelte Webseite im responsive Design würde im IE8 auf die volle Breite im einspaltigen Layout angezeigt werden. CSS Eigenschaften auf Elementen wie nav, section oder article würden nicht greifen.

Lösung für HTML5 Elemente

Dafür gibt es ein kleines JavaScript Snippet html5shiv, wodurch das styling von HTML5 Elementen im IE8 wieder möglich ist.

Lösung für Media Queries

Für den Browser Support von Twitter Bootstrap 3 gibt es eine eigene Unterseite in der Doku. Hier geht es eigentlich fast nur um den Internet Explorer 8 Support. Für die Unterstützung von Media Queries muss in der Webseite respond.js eingesetzt werden. Dabei ist aber auch folgendes zu beachten:

  • Sollte sich Respond.js auf einem anderen (Sub)Domain als das CSS befinden, ist eine Proxy Seite von Nöten, um eine cross-domain Kommunikation zu ermöglichen, da sich respond.js die CSS Files über AJAX holt (mehr infos).
  • Twitter Bootstrap oder andere CSS Files, welche Media Queries beinhalten, dürfen nicht über @import eingebunden werden. Dann funktioniert respond.js nicht.
  • Damit respond.js auch richtig funktioniert und es zu keinen Problemen kommt, sollte die Javascript File nach dem eigentlichen CSS Part eingebunden werden.

Mit diesen zwei Javascript Files und der richtigen Verwendung kann auch ein responsive Design im Internet Explorer 8 mit Twitter Bootstrap 3 realisiert werden.

(Quelle)

Tom Cz

Bin ein bayerischer SEO und WebDeveloper. ➤ Technical SEO ➤ Google Analytics ➤ Google Tag Manager

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.