Responsive Flexbox-Layouts für Fortgeschrittene

Flexbox und ältere Browser

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Zum Schluss stellt Ihnen Peter Müller noch Browser-Prefixes und Tools dafür sowie das JavaScript-Polyfill "flexibility.js" für Flexbox in IE8/9 vor.

Transkript

"caniuse.com" gibt einen guten Überblick über die Browser-Unterstützung für alle möglichen und unmöglichen Umstände. Ich tippe einfach mal "flex" ein und dann sehen wir hier schon, dass das "Flexible Box Layout Module" der erste Treffer ist, mit der Adresse "#feet=flexbox" kann man das direkt aufrufen und die Browser-Unterstützung entspricht in etwa dem, was wir bis jetzt gesehen haben. Fangen wir mal links an, 8 gar nicht, haben wir noch nicht ausprobiert, aber braucht man auch nicht, zu der Zeit, als der gebaut wurde, gab es noch keine Flexbox, aber bemerkenswert ist der 11er, ist nicht mehr in einem normalen Grün, sondern in diesem Gelbgrün und das liegt daran, unten bei viertens kann man das lesen: "Partial support is due to large amount of bugs present (see known issues)." Das heißt, also ganz früher war der mal grün, weil offiziell unterstützt der das und jetzt hat man das ein bisschen eingeschränkt und hat gesagt, er würde es gerne können, aber auf Grund der zahlreichen Bugs, von denen Sie einige gesehen haben, hier sind die "Known issues" gelistet -- hier die wichtigsten --, auf Grund dieser zahlreichen Bugs hat man dann irgendwann gesagt, so richtig grünes Licht ist das hier nicht, wir sagen das mal deutlich, wenn Sie IE 11 unterstützen müssen, dann müssen Sie nacharbeiten, das heißt das auf gut Deutsch. Ansonsten sieht das hier für moderne Browser schon ganz gut aus, hier bei Android sieht es ähnlich aus: "Only supports old flex box specification and does not support wrapping.", also "flex-wrap" kennt er nicht und der braucht, wie hier zu erkennen, ein Browser-Prefix "-webkit-" und wenn ich auf "Show all" drücke, dann sehen Sie die kleinen gelben Kästchen doch hier bei vielen Browsern, selbst Safari in etwas älteren Versionen braucht einen Prefix, um damit arbeiten zu können. Diese Browser-Prefixe kommen ein bisschen aus der Mode, aber für lange Zeit waren sie eigentlich die Methode der Wahl, um Browser mit Features anzusprechen, die sie offiziell noch nicht unterstützen. Wenn man jetzt also diese alten Browser miteinbeziehen will, dann muss man sein CSS um einige Sachen erweitern. Das kann man entweder manuell machen oder man nutzt Tools wie hier zum Beispiel "pleeease.io/play", aber wenn Sie "please" eingeben und "play" hintendran bei Google, dann kommen sie hier schon raus. Zum Ausprobieren hier wie das prinzipiell funktioniert, habe ich im Editor "nav-mixed.css" geöffnet, da ist ein Style drin und der enthält ein bisschen Flexbox-Zeug hier. Das kopiere ich und füge das hier in Pleeease einfach ein, das kommt weg und dafür kommt unser CSS hier rein und solange hier rechts "Autoprefixer" angekreuzt ist, sieht man, dass die Prefixes automatisch erzeugt werden. Das würde von Hand nun wirklich überhaupt gar keinen Spaß machen, wenn Sie sich das ganz kurz anschauen: "display: flex;" in vier Geschmacksrichtungen, "flex-wrap: wrap;" hier in gleich noch ein paar mehr, ganz früher hieß der mal "-webkit-box-pack" und "justify-content" kommt hier auch in mehreren Varianten, "background" bleibt "background", das ist doch schon mal was. Das kann man, wenn man ab und zu Flexbox übersetzen muss mit Prefixes, dann kann man das hier mit Pleeease machen, Sie müssen dann alles hier reinkopieren und das wird automatisch erzeugt und dann quasi das hier wieder zurückkopieren in den Editor und speichern. Wenn man das jeden Tag macht, dann ist das noch wieder was anderes, dann kann man hier bei Google einmal nach "Autoprefixer" suchen und das ganze automatisieren in verschiedenen Geschmacksrichtungen hier mit "postcss", mit "gulp", mit "grunt", was immer man dabei benutzt, das lohnt sich aber -- wie gesagt -- nur, wenn man das täglich oder zumindest mehr oder weniger täglich benutzt und sowieso einen leicht automatisierten Workflow hat. Zum Abschluss hier noch Flexbox-Unterstützung für ganz alte "Internet Exploder", wie ich die immer gerne nenne. "JavaScript polyfill for Flexbox" von Jonathan Neal und das unterstützt hier selbst Internet Explorer 10 oder älter, dann muss man hier eine neue Anweisung hinzuschreiben: "-js-display: flex;", das klingt besser, als es wirklich ist, denn wenn man hier in die Support-Section guckt, dann sieht man hier doch die unterstützten Eigenschaften und da sieht man sehr schön "display-flex" wird unterstützt, das ist ja immerhin was, "flex-direction" gibt es auch "column" und "row", "row-reverse" und so ein Kram gibt es hier auch nicht, aber der Hammer ist dann "flex" und da wird nur "flex-grow" unterstützt, das heißt also, man muss, wenn man das benutzen will, sein Flexbox-CSS schon so schreiben, dass man das von vornherein berücksichtigt und da würde ich dann wahrscheinlich vermuten, dass es lohnender ist, wenn IE 8 und 9 so wichtig sind, dass man dann doch lieber erstmal bei Float-Layouts bleibt, das macht wahrscheinlich mehr Spaß. So weit ein kurzer Überblick zu Flexbox und alten Browsern, schauen Sie sich das an, die Zeit ist mit uns, Flexbox gehört die Zukunft und irgendwann werden diese Farben hier ein einheitliches Grün sein.

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

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!