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!
Automatische Accessibility Audits – Wie wir mit unserem A11y-Testing-Tool Barrieren aufspüren
Barrierefreiheit im Web ist längst kein Nice-to-have mehr, sondern eine Notwendigkeit. Nicht nur, weil Gesetze wie die EU-Richtlinie 2016/2102 oder der kommende European Accessibility Act es vorschreiben, sondern auch, weil eine barrierefreie Webseite mehr Nutzer:innen erreicht und die UX verbessert. Doch manuelle Audits sind zeitaufwendig. Um Accessibility-Probleme effizient zu identifizieren, haben wir ein leistungsfähiges A11y-Check-Tool entwickelt – basierend auf Nuxt 3, Puppeteer und Axe-Core mithilfe der AI-unterstützten IDE Cursor.
Jetzt lesen
UX SNACKS Episode #2 mit Markus Pirker
In Episode 2 hat Susanne Markus, CEO von Userbrain & Host UX Heroes Podcast zu Gast.Markus teilt seine Erfahrungen aus über 15 Jahren im UX-Bereich und erklärt, warum User-Testing mit echten Menschen noch immer unersetzlich ist, wie man [...]
Jetzt anhören