Die älteren Internet Explorer Versionen 6-8 unterstützen leider nicht die für ein responsive Webdesign benötigten Media Queries. Da diese Browser-Versionen allerdings immer noch recht weit verbreitet sind, bleibt zumindest eine Unterstützung der IE-Versionen 7 und 8 bei der Entwicklung eines neuen Webdesigns leider meist weiterhin nötig. Ganz besonders bei der Umsetzung eines mobile-first, responsive Webdesigns wird das Problem der nicht unterstützten Media Queries deutlich, denn hier bildet die kleinste Layout-Version für Smartphones das Standard-Layout. Da die älteren Internet Explorer alle Angaben innerhalb der Media Queries ignorieren, bleibt das kleinste Layout in diesen Browsern also auch auf großen Bildschirmen bestehen (was natürlich in den seltensten Fällen gewünscht ist). Um eine JavaScript-abhängige Lösung (z.B. mit dem respond.js Script) zu vermeiden, kann man Conditional Comments für die entsprechenden Internet Explorer-Versionen einbinden und das Webdesign dann mit Hilfe zusätzlicher CSS-Eigenschaften im Stylesheet allein mit CSS für die alten IEs optimieren.

“Leaving old Internet Explorer behind”

Den Ansatz, eine JavaScript-freie Lösung für die Unterstützung älterer Internet Explorer in einem mobile-first Webdesign zu finden, habe ich im Artikel “Leaving old Internet Explorer behind” entdeckt. Die Idee hat mich überzeugt, da sie eine simple und praktische Alternative zur Verwendung von JavaScripts bietet.

Und so funktioniert die Umsetzung:

1. Conditional Comments

Glücklicherweise kann man für die älteren Internet Explorer-Versionen Conditional Comments einbinden. Mit Hilfe dieser praktischen Funktion, hat man die Möglichkeit extra CSS-Klassen zu zuweisen, wenn ein älterer Internet Explorer Browser im Einsatz ist. Die Conditional Comments werden innerhalb des head-tags (in einem WordPress-Theme also in der header.php Datei) eingefügt.

Du kannst entweder eine gemeinsame CSS-Klasse (.ie) für alle älteren Browser-Versionen einfügen:

[code]
<!–[if lte IE 8]><html class="ie"><![endif]–>
[/code]

Oder die einzenen Internet Explorer-Versionen separat ansprechen:

[code]
<!–[if lt IE 7]><html class="ie6"><![endif]–>
<!–[if IE 7]><html class="ie7"><![endif]–>
<!–[if IE 8]><html class="ie8"><![endif]–>
[/code]

“lte” steht hier für “gleich oder kleiner als”, “lt” für “kleiner als”. Im Beitrag “About Conditional Comments” auf der msdn-Webseite findest du eine ausführliche Übersicht zur Verwendung von Conditional Comments für ältere Internet Explorer Browser.

2. Die zusätzliche CSS-Klasse

Um die Unterstützung ältere Internet Explorer in einem responsive, mobile-first Webdesign nicht unnötig kompliziert zu machen, reicht in den meisten Fällen eine gemeinsame CSS-Klasse z.B. .ie für alle älteren IEs aus.

[css]
.ie #container {
width:980px;
}
[/css]

Bevor die Media Queries für das responsive Layout in deinem Stylesheet beginnen, kannst du jetzt also alle benötigten .ie Styles integrieren, um das Webdesign auch in den älternen Internet Explorern anständig aussehen zu lassen.

Damit das eigentlich für kleine Smartphone-Bildschirme angelegte Layout eines mobile-first Webdesigns nicht über die komplette Bildschirm-Größe gestretched wird, solltest du dem Layout also als erstes eine maximale Gesamtbreite in Pixel zuweisen (z.B. width: 980px für die CSS-Klasse .container).

Je nachdem, was für einen Layout-Aufbau dein Webdesign hat, kannst du jetzt eine Gesamtbreite für deinen Contentbereich und eine Gesamtbreite für eine eventuelle Sidebar hinzufügen. Die benötigten float-Werte musst du natürlich auch noch hinzufügen. Wenn es das Layout deines Webdesign erlaubt, kannst du auch überlegen, ob du für die älteren Internet Explorer-Versionen eine vereinfachte, vielleicht einspaltige Webdesign-Version beibehältst. Auf diese Weise müssen nicht unnötig viele zusätzliche CSS-Eigenschaften extra für die alten IEs im Stylesheet addiert werden.

Es kommt wohl immer ein wenig auf den individuellen Webseiten-Aufbau an, in wie weit man das Layout für die alten IEs vereinfachen kann, um so die Größe des Stylesheets möglichst gering zu halten. Aus meiner eigenen Erfahrung sollte man die Ansicht möglichst oft live testen oder einen IE Test-Browser (z.B. IE NetRenderer oder IETester) zum Testen des Layouts einsetzen. Hilfreiche Tipps für deine Browsertests findest du auch noch im Artikel “Webseiten Cross-Browsertests: Ein kleiner Überblick praktischer Tools und Tipps”.

Wie gefällt dir diese Alternative?

Meiner Ansicht nach ist die Lösung, mit Hilfe von Condtional Comments die älteren IE Browser anzusprechen und so eine Media Queries unabhängige Layout-Version für diese Browser zu erstellen, eine praktische Alternative, um auf aufwendigere JavaScripts verzichten zu können. Wie gefällt dir diese Alternative und hast du weitere Lösungen für die Unterstüztung der älternen Internet Explorer 6-8 in einem responsive Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr!