Zurzeit teste ich ein neues WordPress-Theme mit einem Responsive Design in verschiedenen Browsern. Bei diesem Theme arbeite ich mit HTML5, CSS3 und Media Queries. Moderne Browser können diese Angaben lesen, ältere IE-Versionen aber haben damit Probleme. IE7 und IE8 können weder HTML5-Syntax noch Media Queries interpretieren.

Nun kann man darüber streiten, ob man diese betagten Browser überhaupt noch berücksichtigen muss. Der Anteil des IE7 ist inzwischen verschwindend klein, auch der IE8 ist auf dem Rückzug. Da Windows zusammen mit System-Updates automatisch und ungefragt den Browser aktualisiert, dürfte es nicht mehr viele User geben, die mit dem IE8 oder gar dem IE7 unterwegs sind.

Aber immerhin, es gibt sie. Und je nach Thema und Inhalt der Website kann es wichtig sein, alle mitzunehmen. Auch diejenigen, die mit älteren Rechnern im Web surfen.

Hilfestellung per JavaScript

Es gibt eine ganze Reihe von Javascripts, die IE7 und IE8 in Sachen CSS3 und HTML5 auf die Sprünge helfen. Die JavaScript-Bibliothek Modernizr macht ältere IE-Versionen „HTML5-fähig“ – wobei man hier keine Wunder erwarten darf. Der IE7 stammt aus dem Jahr 2006, der IE8 kam im März 2009 heraus. Das ist eine Weile her.

Ein sehr praktisches Tool, mit dem man ohne viele Umstände ein Basis-Template für ein Responsive Design erzeugen kann, ist übrigens initializr. Hier werden die wichtigsten Instrumente für die Cross-Browser-Kompatibilität gleich mitgeliefert.

Und was ist mit Media Queries?

Arbeitet man mit Media Queries, dann wird man im IE7 und 8 keinen Effekt sehen. Das Layout verändert sich nicht, wenn man die Größe des Browserfensters verändert, denn die Browser können die Queries nicht lesen. Das ändert sich auch nicht, wenn man man Modernizr eingebunden hat.
Ein weiteres Javascript muss her: respond.js liefert älteren Explorer-Versionen die Grundbegriffe der Media Queries. (respond.js war vor einiger Zeit in Modernizr integriert, das ist inzwischen aber nicht mehr der Fall.)

Mobile First und JavaScript

JavaScript-Polyfills sind eine tolle Sache. Damit lässt sich fast jede Funktion in ältere Browser einpflanzen. Voraussetzung ist allerdings, dass JavaScript auch arbeiten kann, dass der Browser also mit JavaScript umgehen kann bzw. dass es aktiviert ist.

Bei Desktop-Browsern ist das kein Thema, aber in der Welt der Mobiltelefone sieht es anders aus. Wie Stephanie Rieger in einer Diskussion auf Github berichtet, ist die JavaScript-Unterstützung bei Smartphones eine unzuverlässige Angelegenheit.

Je nachdem, welche Zielgruppe eine Website hat und mit welchen Geräten diese Zielgruppe unterwegs ist, muss man also über Alternativen zu JavaScript-Polyfills nachdenken.
Kommt dazu, dass jedes Javascript, das geladen wird, an der mobilen Bandbreite nagt. Auch das ist ein Grund, an dieser Stelle sparsam zu sein.

Eigene Stylesheets für IE7 und IE8

Viele Entwickler von HTML5-Frameworks haben sich von respond.js inzwischen verabschiedet und arbeiten mit alternativen Methoden. Eine davon ist ziemlich einfach: IE7 und IE8 bekommen per Conditional Comments ein eigenes Stylesheet zugewiesen.
(Eine sehr schöne Zusammenstellung aller möglichen Conditional Comments für den Internet Explorer gibt es bei CSS-Tricks.)

Die Idee ist nicht neu, im Fall von Responsive Design erlebt sie sozusagen ein Revival. In den IE-Stylesheets stecken nämlich nicht nur ein paar wenige Anpassungen, sondern IE7 und IE8 bekommen sozusagen ein komplettes persönliches Layout.
Ganz traditionell, mit festen Breiten in Pixeln statt Prozenten. Das Layout ist dann zwar nicht „responsive“, aber die Darstellung ist korrekt und funktioniert zuverlässig.

Da IE7 und IE8 Browser für Desktop-Rechner sind, ist es nicht weiter tragisch, dass das Layout eine feste Breite hat. Hier gelten die alten Webdesign-Regeln nämlich noch: Man kann die Bildschirmbreite der Geräte, mit denen die Leute unterwegs sind, relativ gut vorhersagen. Es werden eher ältere Laptops sein oder altgediente Desktop-Rechner mit kleinen Monitoren. Das Layout kann sich an einer Breite von 800 bis 960 Pixeln orientieren.