Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

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 Verrenkungen. Wenn da nicht die alten Browser wären.

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

Das ist natürlich mühsam. Bevor ich mir die doppelte Arbeit mache, bleibe ich doch lieber bei den altbewährten Methoden. Floats und clearfixes können neue und alte Browser lesen. Wegen dem bisschen Semantik lohnt sich der Aufwand nicht.

Ist das nur eine bequeme Ausrede oder ist da was dran?

Wer surft noch mit alten Browsern?

IE8 IE9 IE10
weltweit 1,63% 1,29% 1,29%
Deutschland 1,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.


Wie geht Ihr mit dem Thema um? 
Arbeitet Ihr noch mit Floats und Clearings oder seid Ihr schon mitten drin im Thema Flexbox?

4 Kommentare zu “Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

  • Carsten Witt 7. März 2016

    Moin, bin Entwickler in einem B2B-Unternehmen mit technisch eher heterogener Kundschaft. Ich bin schon vor geraumer Zeit zu einem eher radikalen Kurs übergegangen, IE7/8/9 komplett zu ignorieren und eigentlich alle Browser unterhalb von 5%, wie alte 2.x Androids. Auch lege ich keinen gesteigerten Wert darauf, dass alles überall gleich aussieht: „Plausibel und stimmig“, ist meine Devise. Das hat natürlich zur Konsequenz, dass uU mal auf Browser XY ein Bild partout nicht angezeigt wird oder irgendein Widget nicht funktioniert. Dann ist das eben so, und auf dem Gerät auch sicher nicht das erste Mal in der Erfahrung des Kunden. Mit seinem nächsten Smartphone wird das dann besser. Auf Media-Queries setze ich schon einige Jahre, auf Flexbox erst seit einigen Monaten. CSS-Anpassungen für IE10 ff. lasse ich von via Gulp/Autoprefixer einpflegen.

  • Beim Thema Flexbox und IE Kompatibilität bin ich jetzt dazu übergegangen bei meinen ohnehin mobile-first angelegten Webseiten für die alten IE Versionen einfach die mobile Version mit fettem Hinweis auf veralteten Browser auszugeben. Da ist sowieso alles untereinander und braucht kein Flexbox.

    Optisch ist es sicher nicht ideal, je größer der Screen halt ist, aber in der Regel kann man auf alle Inhalte problemlos zugreifen. In meinen Augen ist das die Hauptsache.

  • Prozentwerte sind gute Anhaltspunkte. Vergiss aber nicht, dass 1.5% eine Menge Leute sein kann. Bei unserem grössten Projekt kommen hierzulande (Schweiz) «nur» 1.8% mit IE8 vorbei… was aber während den letzten sechs Monaten knapp 65’000 Personen entspricht!

  • Martin L. 28. April 2016

    Flexbox kann problemlos eingesetzt werden. Alte IE sind nur Ausreden. Prefixe sind, wenn überhaupt, nur noch für den IE10 sinnvoll.

    Das Problem fängt schon damit an, dass die Old-IE-Seitenersteller selbst über keine alten IE verfügen. Sie sind der Meinung, wenn sie auf Flexbox verzichten funktioniert ihre Seite in alten IE – meist ein Irrtum. Wenn ich ihnen im echten alten IE ihre Seite zeige fällt für sie häufig eine Welt zusammen. In den IE-Emulationen von aktuelleren IE funktioniert nämlich vieles, was im Original-Browser nicht funktioniert. Wer Seiten für den IE8 entwickelt benötigt auch den original IE8 zum Testen. Die haben außer Flexbox nämlich noch ganz andere Problemfelder.

    Durch Flexbox explodiert die Seite in alten IE auch nicht. Reine CSS-Fallbacks sind in vielen Fällen zudem problemlos möglich. Die Seite wird dann zwar einfach, aber übersichtlich und voll funktionsfähig angezeigt. Viele User begrüssen solche „einfachen“ Ansichten sogar, da sie die entscheidenden Informationen so schneller erkennen und finden.

    Die meisten Old-IE-User surfen zudem auch mit anderen Geräten (Smartphones, Tablets), bei denen Flexbox seine Stärken ausspielt. Inzwischen (Ende April 2016) haben der IE8 und IE9 laut Can I Use nur noch einen Marktanteil von 0,5% mit immer noch sinkender Tendenz. Seltsamerweise werden andere Browser mit einen ähnlich geringen Marktanteil von den Old-IE-Seitenerstellern nicht speziell unterstützt.

    Ob jemand Flexbox verwenden möchte ist allein seine Entscheidung. Anderen Leuten hingegen Flexbox mit Gruselmärchen ausreden zu wollen, meist weil man selbst mit den Verwendung von Flexbox überfordert ist, ist bereits seit über einem Jahr nicht angemessen.

Schreibe einen Kommentar

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