Responsive Flexbox-Layouts für Fortgeschrittene

All Together 4: Das Layout im IE11

Testen Sie unsere 1890 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Im IE11 scheint das Layout auf den ersten Blick völlig kaputt zu sein, doch nach ein paar kleinen Nachbesserungen sieht es ganz in Ordnung aus.

Transkript

In einem modernen Browser wie hier in Chrome sieht die Beispielseite schon ganz gut aus, aber richtig spannend wird das natürlich erst, wenn man es in etwas älteren Browsern probiert, wie z. B. hier im Internet Explorer 11, mit dem man den Internet-Explorer- Countdown meistens beginnt und da sieht das doch schon etwas anders aus. Hier hat man nicht genau das, was man erwartet hat. Nach unten ist es schnell vorbei, aber dafür bricht das hier alles kilometerweit nach rechts raus. Es ist nicht ganz so schlimm, wie es auf den ersten Blick aussieht, aber wenn man hier eine solche Begegnung hat, dann kann man am besten nachschauen bei einer Adresse, die heißt: "philipwalton/flexbugs" auf github.com. Das ist eine "community-curated list of flexbox issues", also Probleme mit Flexbox bei "bugs and their workarounds", das wird immer mal wieder aktualisiert hier. Und dann sehen wir schon gleich, wenn man ein bisschen runterscannt, bei Nummer 8 ist ein potentieller Kandidat: "flex-basis doesn't support calc()". Wir benutzen das und hier steht, Internet Explorer 10 und 11 verstehen das nicht. Das ist ein wunderbares Beispiel hier für ein Bug und wie man ihn behebt und es geht hier im IE 11 im Augenblick darum, dass man sagt: "An easy workaround is to specify the flexibility property individually." Also "flex-basis" in der "shorthand" wird nicht verstanden, in der "flex shorthand", aber wenn man "flex-basis" hinschreibt, ausgeschrieben als "longhand", dann soll er es verstehen, wir probieren das mal. Das CSS ist in "card-styles.css" und dort unten finden wir hier schon den ersten "flex shorthand"-Übeltäter. Ich schreibe also in der nächsten Zeile dasselbe nochmal hin: "calc(50% - 0.5em)", und dadrunter gleich nochmal hier: "flex-basis: calc(33% - 1em)", also genau dasselbe wie oben dadrüber, aber der Internet Explorer soll das in der Longhand verstehen, in der Shorthand-Flex nicht, gespeichert ist. Ich gehe rüber in den IE und lade die Seite neu und es sieht anders aus als vorher, aber noch nicht wirklich gut. Wenn ich jetzt nach unten scrolle, dann sehen wir, er versteht die Breite eigentlich schon, aber er versteht noch nicht hier die Breite einer einzelnen Karte und das ist eine etwas seltsame Geschichte. Die Ursache liegt in dem gleichen Stylesheet etwas weiter höher, alles in das "a" eingepackt und anscheinend ist es eine Art Rundungsfehler oder sowas, wenn ich hier jetzt reinschreibe: "max-width: 99.99%;", dann wird es funktionieren, bei 100% versteht der Internet Explorer das nicht mehr. Das sieht doch schon ganz gut aus, man kann sogar animieren hier, also ein ganz klein bisschen, da versteht er irgendwas noch nicht, aber es ist immerhin schon ein Layout erkennbar. Das mit dem Ausblenden hier ist übrigens ein anderer IE-Bug, da kümmern wir uns gleich noch drum, ich möchte hier nur nochmal eben kurz drüberschreiben, dass das nur für den IE ist, damit man das auch morgen noch weiß und sich nicht fragt, was hat man denn hier jetzt wieder geschrieben? Und hier auch noch eben und dann gehen wir gleich ins nächste Stylesheet. Die Sidebar, das Switchen der Sidebar wird in "sidebar-switcher.css" geregelt und Sie sehen, der Cursor blinkt hier rein zufällig schon: "flex: 0 0 0;", ein weiterer Bug ist, dass in der Shorthand von "flex" der Internet Explorer die "flex-basis" nicht versteht, wenn dort keine Einheit vorhanden ist, also "0 0 0" versteht er nicht, "0 0 0px" versteht er oder 0% würde wahrscheinlich auch gehen. Jetzt lade ich die Seite noch einmal neu und dann verschwindet die Sidebar, die Animation, die Transition, ist nicht ganz so wie geplant, da hat er auch so seine Schwierigkeiten mit, aber es ist hier immerhin die Sidebar weg und das Flex-Box-Layout mit den Karten nimmt den zur Verfügung stehenden Platz ein. So weit, so gut. Mit drei, vier kurzen Ausbesserungen ist das selbst im IE 11 einigermaßen ok.

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016
Laufzeit:2 Std. 25 min (34 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!