[W3Conf] Eric Meyer: „Die Ära des absichtlichen Layouts“

Am Anfang… sagte Tim: „Es werde Markup.“ Und dann trennte Tim die Struktur vom Aussehen. Das ist ein grundlegendes Merkmal des Webs.

Das Erste, was Mozilla Netscape tat, als es sich 1994 mit dem Web beschäftigte und HTML erweiterte, war die Erweiterung seiner präsentationalen Fähigkeiten. Sofort wurde die klare Trennung zwischen Inhalt und Design gebrochen.

„Es waren eine ganze Weile Tabellen bis zum Anschlag. Spacer-GIFs und alles Mögliche. Ja, ich sage GIF mit hartem G. Kommt damit klar.“

Witze!

Warum hat der Webdesigner das Restaurant verlassen? Er konnte das Tabellenlayout nicht ertragen! — @meyerweb #w3conf

— Christine Bower (@chrisbean) 22. Februar 2013

Mit IE 5 wagten wir uns an CSS.

CSS1 war ein ziemlich kurzes Dokument. Man konnte es an einem Abend durchlesen. Es hatte buchstäblich keinerlei Layout-Fähigkeit. Naja, es gab Floats. Aber die waren nicht für Layouts gedacht, sondern nur dazu gedacht, Text um Bilder zu wickeln (um das `align`-Attribut in IE nachzuahmen).

Floats für Layouts zu verwenden war gefährlich. Zum Beispiel „Float Drop“ – das ist nicht gut für Layouts. Auch die „Float Containment“ ist seltsam und immer noch ein Problem. Floats haben zwar `clear`, und das machte sie wirklich nützlich für die Positionierung.

Die erste große Website, die Positionierung für Layouts nutzte, war Wired.com von Doug Bowman. Er traf Designentscheidungen, die von der Technologie vorgegeben waren.

Wir verwenden immer noch Floats für Layouts. Es ist ein Hack und war schon immer ein Hack. Um fair zu sein, Tabellen waren auch ein Hack. Sie waren nicht dafür gedacht, aber es war das Nächstliegende zu dem, was wir brauchten.

---

Die Einheiten vw/vh repräsentieren jeweils 1/100 der Viewport-Breite bzw. Viewport-Höhe. Wir können Breiten und Höhen in diesen festlegen und sie auf den verfügbaren Platz auf der Seite beziehen. Ähnlich wie Prozent, aber immer bezogen auf den Viewport, nicht auf das Elternelement. Aber nicht nur für Längen, sondern auch für `font-size`, um Typografie direkt auf den Viewport zu beziehen.

Flexbox ist ein Layoutsystem, das tatsächlich für Layouts konzipiert ist. Es gibt auch einen Polyfill dafür. Hinweis: Er ist nur für die alte Syntax, nicht für die neue, und der Polyfill ist für die neue Syntax noch nicht ganz da. Mit den Flexbox-bezogenen Eigenschaften wie `justify-content` erhalten Sie eine Menge Kontrolle.

The Holy Grail Layout erzeugte ein Header/Footer/Main/Links/Rechts-Layout mit verrückten „perversen“ Dingen mit riesigen negativen Abständen und positiven Polstern. Es war kompliziert und seltsam, aber es funktionierte. Änderungen waren aber schwierig vorzunehmen (z. B. fest-fließend-fest statt fließend-fest-fließend).

Flexbox macht ein „Holy Grail“-ähnliches Layout trivial einfach. Ganz zu schweigen davon, dass die Quellreihenfolge irrelevant ist. Den Hauptinhalt zuerst zu setzen, ist nur eine Frage der Änderung von `order`.

Wenn Flexbox ausgeschaltet wird (`display: block` statt `display: flex`), werden alle Kinder zu normalen Blöcken und legen sich wieder übereinander. Das macht ein Ein-Spalten-Layout (vielleicht für Mobilgeräte) einfach. Denken Sie aber an die Quellreihenfolge.

Flexboxen sind standardmäßig gleich hoch, müssen es aber nicht sein. Sie können sie oben (`flex-start`), unten (`flex-end`), in der Mitte oder auf der Grundlinie ausrichten. GENAU: vertikales Zentrieren in CSS (irgendwie). Sie können alle Flexboxen diesen Regeln folgen lassen oder sie pro Flexbox mischen und anpassen.

Kombinieren Sie all diese mit Inhaltsausrichtung, und Sie erhalten einige ziemlich verrückte und leistungsstarke Layout-Möglichkeiten. Hinweis: Mein Artikel über die Kombination alter und neuer Flexbox-Syntaxen.

Grids sind ein weiteres neues, bevorstehendes Layoutsystem. Sie definieren Gitterlinien und hängen dann im Wesentlichen Inhalte an die Gitterlinien. „Lege dies von dieser Gitterlinie bis zu jener anderen Gitterlinie aus.“

Grids und Flexbox schließen sich nicht gegenseitig aus. Ein Grid (Zelle?) kann ein Flex-Elternteil sein. Ein Grid kann ein weiteres Grid enthalten. Eine Flexbox kann ein Grid darin haben. *Yo dawg, ich habe gehört, du magst Grids in deinen Grids…* Sie verstehen.

In Grids gibt es neue `fr` (Fraction)-Einheiten. Sie repräsentieren den verbleibenden Platz in einem Grid-Layout. Die Syntax ist ziemlich seltsam. Mehrere Werte, und einer davon wird „gewinnen“.

CSS Regions sind mit dem Layout verwandt. Sie müssen immer noch eine tatsächliche Layout-Technik verwenden, aber mit Regionen steuern Sie, wie Inhalte von einem Element zum nächsten fließen. Hinweis: Auf CodePen läuft gerade ein Wettbewerb zum Spielen mit Regionen.

„Zwei Jahrzehnte an Layout-Hacks gehen zu Ende. Vielleicht nicht morgen, aber bald und für den Rest unseres Lebens.“

---

Das war der letzte Vortrag der Konferenz. Ich fand diese Stimmung schön.

Also, nicht um ganz gefühlig oder so zu werden, aber diese ganze Konferenz hat mich wieder in die Webentwicklung verlieben lassen. Danke, Kinder. #w3conf

— Jordan Pagels (@designerjordan) 23. Februar 2013