UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

CSS3 Flexbox

14. März 2013, von Sarah
Liechtenecker Büro

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…
css_flexbox_kreis
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!

Sarah

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

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
Close