Matthias Scharwies: SELF-Wiki: Layout-Verhalten mit display

SELF-Forum

SELF-Wiki: Layout-Verhalten mit display

Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Guten Morgen,

eigentlich wollten wir nur die Größenangaben in CSS überarbeiten.

Auf dem Stammtisch schauten wir uns dann den Artikel zum Boxmodell an, der in den letzten Wochen aktualisiert wurde.[1]

Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure peer-review:

Kapitel 1 führt das „klassische“ Modell block vs. inline ein.
Das ist mir erst während des Schreibens aufgefallen: inline-block ist weitgehend von flex ersetzt worden - eine Anwendung ist noch, einen span zu inline-block umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [2]

Kapitel 2 führt die Doppel-Syntax ein.
Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was block flex und inline flex unterscheidet.
Im Kapitel zu flow-root wird der Begriff Blockformatierungskontext erwähnt und verlinkt, aber nicht eigens erklärt. Passt das so?[3]

Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in Kapitel 3 und auch in Kap. 4 nur kurze Erklärungen und Cards auf Folge-Tutorials verwendet.
Auch vorher hatte ich überlegt, ob Werte wie run-in überhaupt erwähnt werden sollen. Imho ist dafür die Referenz da, in der es aufgeführt ist.
Auch die vielen Werte zu display:table-* würden in einem Anfänger-Tutorial eher verwirren. Wer das sucht, findet ein Beispiel an gewohnter Stelle in einem Extra-Artikel: CSS/Eigenschaften/display:_table

Bitte lest euch das mal durch!

BTW: Wer sich über den Namen „Layout-Verhalten mit display“ wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen.

Herzliche Grüße
Matthias Scharwies

--
bildung.social/@selfhtml

  1. Gleich am Anfang wurden margin und padding erwähnt, aber nicht erklärt.
    Das ist nachgeholt.
    Über einen Callout-Generator kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. ↩︎

  2. Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! ↩︎

  3. Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden.
    Das Tutorial Textumfluss mit float und clear ist angepasst.
    Noch besser ist allerdings Flexbox oder Grid! ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln