Wer kennt das nicht: ewiges Herumprobieren und Tweaken beim Positionieren von HTML Blöcken und zwar so, dass das ganze auch noch sinnvoll für mobile Geräte dargestellt wird.
Das kann manchmal ziemlich schrecklich sein und oft denkt man sich: “Warum muss diese Kleinigkeit jetzt eigentlich so schwer sein, dass ein Element zentriert dargestellt wird?” Auf den ersten Frust folgt danach das große Googeln und das Finden von irgendwelchen zwielichtigen CSS Hacks, die dann aber dummerweise nicht in allen Browsern funktionieren. Da bleiben oft nur zwei Optionen: CSS Hacks für die CSS Hacks zu suchen oder alles umzustellen und neu zu machen. Und am Ende klappt es dann endlich – verhält sich aber nicht wie gewünscht am Smartphone…
Dies ist einer der Gründe warum wir uns schon sehr auf vollen Browsersupport von Flexbox (CSS Flexible Box Layout Module) freuen.
Für alle die nichts mit dem Begriff anfangen können (ich sags euch, ihr werdet begeistert sein!):
Eigentlich wird hier schon lange herumgebastelt und spezifiziert, aber erst seit Anfang dieses Jahres habe ich den Hype um Flexbox mitbekommen.
Flexbox ist eine Alternative zum Block Model, das es erlaubt, Elemente in einer gewünschten Reihenfolge und Ausrichtung zu positionieren. Ein großer wichtiger und wahrscheinlich ungewohnter Unterschied ist, dass Flexbox keine floats kennt/braucht. Da es sich nur um CSS handelt wird der HTML Code nicht verändert, sondern nur das Aussehen (wichtig für SEO und Accessibility). Das ist natürlich noch nicht alles, aber für genauere Informationen lest ihr am besten an den unten angeführten Links weiter.
Das Layout befindet sich gerade noch in der “Recommendation stage” und wird noch sehr wenig unterstützt. Für Webkit muss mit -webkit geprefixed werden, Gecko braucht dies nicht, allerdings werden hier noch nicht alle Eigenschaften unterstützt. Der IE10 sowie Safari unterstützen eine alte Version der Spezifikation (Alte Flexbox vs Neue Flexbox http://css-tricks.com/old-flexbox-and-new-flexbox/).
Wenn ihr tiefer in das Thema eintauchen wollt (und glaubt mir, das wollt ihr 😉 ) empfehle ich diese Artikel:
W3C Editor’s Draft
Mozilla Developer Network
Artikel im teamtreehouse Blog
Außerdem kann hier mit Flexbox gespielt werden:
Flexyboxes
CSS Flexbox Please!
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
UX Snacks Vol.09
That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.
Jetzt lesen
Folge #62 mit Susanne Liechtenecker
In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.
Jetzt anhören