Das Web entwickelt sich im Sauseschritt. Heute ist SVG das Grafik-Format der Wahl und die Flexbox-Methode bringt uns endlich flexible CSS-Raster ohne semantische Umwege.

So lange wir Code vorhalten müssen, den auch alte Browser lesen können, haben wir aber ein Problem. Wir müssen eine Menge Sachen doppelt schreiben, eine Version für moderne Browser und eine für die älteren Herrschaften.

Floats und clearfixes können neue und alte Browser lesen. Lohnt sich der Aufwand mit Flexbox überhaupt oder soll man einfach die alten Methoden weiter nutzen?

Wer surft noch mit alten Browsern?

IE8IE9IE10
weltweit1,63%1,29%1,29%
Deutschland1,1%1,0%1,0%

Die Marktanteil von IE 8, IE9 und IE10 im Januar 2016 (weltweit) Quelle: statista.com und pagemachine

Die Marktanteile alter IE-Versionen sind sehr niedrig, erstaunlich niedrig. Die Frage ist natürlich, ob es sich lohnt, für so wenige Browser auf modernen Code zu verzichten.

Alte Internet-Explorer sind doch unsicher – wer ist denn so blöd und nutzt sowas?

Meine Theorie: Diejenigen, die nicht anders können. Es gibt es zwei Ursachen, warum Leute mit veralteten Browsern unterwegs sind.

1. Alte Rechner

Internet-Explorer sind an die Betriebssystem-Version geknüpft. Das dürfte die Hauptursache dafür sein, dass sie sich immer noch so zäh behaupten. Menschen, die wenig Geld haben, haben häufig nur einen alten Windows-Rechner zur Verfügung. Wenn ein Online-Shop diese Gruppe im Visier hat, kann es sinnvoll sein, auch alte Browser zu berücksichtigen. 1% mehr Umsatz ist durchaus Geld. Auch öffentliche Institutionen, die niemanden ausschließen wollen, können alte Browser nicht einfach ignorieren.

2. Firmen-Netzwerke

Wenn die gesamte Organisation der Firma von einer uralten Outlook-Version abhängt, dann ist es sehr wahrscheinlich, dass eine große Anzahl von Rechnern auf alten Systemen laufen. In der Regel dürfen sich die Mitarbeiter nicht frei im Web bewegen – die Gefahr, dass sich ein Rechner einen Virus einfängt und damit die gesamte IT infiziert, ist einfach zu groß. Aber es gibt immer ausgewählte Seiten, die auch vom Firmennetzwerk aus aufgerufen werden dürfen. Die Seiten von Lieferanten und Partnern zum Beispiel. Auch beim Entwickeln solcher Seiten kann man alte Browser nicht aussen vor lassen.

Also was, wenn wirklich mal einer mit einem alten Browser guckt – welches Risiko gehen wir ein, wenn wir modernen Code schreiben? Was könnte schlimmstenfalls passieren?

Alte Browser und moderner Code

Die wichtigsten Probleme mit Internet Explorer 8

  • Kann HTML5-Elemente nicht lesen
  • Kennt nur Pixel, keine Werte in em und rem
  • Kann SVG-Dateien nicht darstellen
  • Kann keine Mediaqueries lesen (und Flexbox auch nicht)

Diese drei Punkte sind meiner Erfahrung nach die wichtigsten Stolpersteine. Wenn man sich um diese Fehler kümmert, ist die Seite zumindest bedienbar.

Alle Werte für Schriftgrößen und Abstände müssen auch in Pixeln angegeben werden. Dafür gibt es SASS Mixins. Für die Nachhilfe in HTML5 gibt es das Javascript HTML5 Shiv. Und alle Browser, die keine Mediaqueries lesen können, bekommen die mobile Ansicht* präsentiert. Denn wer mit dem IE8 im Internet surft, hat mit Sicherheit keinen modernen Grossbildschirm vor der Nase. Man muss sich eher ein betagten Laptop mit maximal 1024px Auflösung vorstellen.
*Voraussetzung ist natürlich, das CSS ist nach der Mobile First gebaut.

Thema SVG

Bei background-images im CSS hilft ein einfacher Trick, nämlich das background-image zweimal zu deklarieren, einmal als SVG und einmal als PNG. Der Browser sucht sich dann das raus, was er lesen kann.

background-image:url('images/bg.svg');
background-image:url('images/bg.png');

Aber sobald eine Seite beispielsweise mit vielen SVG-Icons arbeitet, wird es aufwändiger. Hier kann bietet sich Modernizr an. Damit kann man herausfinden, ob ein Browser SVG-Format versteht und festlegen, dass im Fall der Browser auf ein Fallback in Form einer png-Datei zurückgreift. Das bedeutet natürlich, dass alle SVG-Dateien einen PNG-Zwilling haben müssen, der am selben Ort liegt wie die SVG-Datei.

<img src="tomato.svg">
if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var svgExtension = /.*\.svg$/
    var l = imgs.length;
    for(var i = 0; i < l; i++) {
        if(imgs[i].src.match(svgExtension)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
            console.log(imgs[i].src);
        }
    }
}

Quelle: http://callmenick.com/post/svg-fallback-with-png

Natürlich gibt es noch viele andere Punkte, an denen der IE8 Probleme hat. Zum Beispiel border-radius für runde Ecken, box-shadow, CSS-Animationen und Vieles mehr. Aber das sind eher visuelle Dinge. Fallen diese CSS-Eigenschaften weg, wird die Seite zwar weniger hübsch, aber sie ist immer noch bedienbar.

Die wichtigsten Probleme mit Internet Explorer 9 und 10

  • SVG-Unterstützung unvollständig
  • Kann Flexbox nicht lesen

IE9 und IE10 können mehrspaltige Layouts darstellen, die mit Mediaqueries erstellt wurden. Das ist die gute Nachricht. Die schlechte Nachricht ist: Flexbox ist nicht im Angebot. Das heisst, der IE braucht entweder ein Fallback-Stylesheet mit Mediaqueries – was je nach Umfang der Seite ziemlich aufwändig werden kann – oder wir greifen auch hier auf die mobile Ansicht zurück. Ich tendiere zu Letzterem.

Eine Übersicht aller Eigenschaften, die IE8 und IE9 unterstützen, findet Ihr bei caniuse.com

Fazit

Ich fürchte, an flexbox und SVG führt kein Weg mehr vorbei. Wenn man sich von dem Gedanken frei macht, dass eine Webseite auf jedem Gerät gleich aussehen muss, kann man mit relativ wenig Aufwand ein paar Fallbacks für Uralt-Browser einbauen. Wobei man von Projekt zu Projekt entscheiden muss, ob sich der Aufwand dafür tatsächlich lohnt.