2015: CSS-Layouts gründlich lernen

 (book.mixu.net)
6 Punkte von GN⁺ 2024-03-01 | 1 Kommentare | Auf WhatsApp teilen
  • Ein kapitelweise aufgebautes Lernmaterial für Leser, die CSS-Layouts bereits verwendet haben und den Layout-Algorithmus bis in die Detailregeln verstehen möchten
  • Erklärt inline, block, z-index und das Box-Modell nicht nur als einfache Anwendung, sondern erneut über Entscheidungsregeln wie Formatting Contexts und Stacking Contexts
  • Im normalen Fluss wird die relative Position von Block- und Inline-Elementen nicht allein durch display bestimmt; Geschwisterelemente und der Kontext wirken ebenfalls mit
  • Die Berechnung der Größe im Box-Modell und von margin: auto hängt von der Positionierungsart ab, weshalb sie sich schwer als eine einzige Regel auswendig lernen lässt
  • Führt von normalem Fluss, float, absoluter Positionierung, Margin Collapsing, Overflow, z-index, Pseudoelementen und Flexbox zu praktischen Layout-Problemen wie Zentrierung und Grid-Frameworks

CSS-Layout als Regelwerk verstehen

  • Dieses Material betrachtet CSS-Layout nicht als Sammlung von Tipps, sondern als regelbasiertes System und erklärt die einzelnen Regeln ausführlich Kapitel für Kapitel
  • Wie der Ausdruck „pedantic“ nahelegt, verfolgt es einen Ansatz, der auch scheinbar nebensächliche Details und formale Regeln genau nimmt
  • Die Zielgruppe sind nicht Menschen, die CSS zum ersten Mal lernen, sondern diejenigen, die CSS bereits einsetzen und das Layout-Verhalten präziser verstehen möchten
  • Websites entwickeln sich meist schrittweise weiter, sodass man Layouts leicht nur über kleine Tipps und Tricks lernt und dabei den Layout-Algorithmus selbst aus dem Blick verliert
  • Die wichtigsten Konzepte werden der Reihe nach behandelt, jeweils zusammen mit Anwendungsbeispielen, mit denen sich die Konzepte überprüfen lassen

Aufbau nach Kapiteln

  • Chapter 1: Box positioning in CSS behandelt, wie die von HTML-Elementen erzeugten Boxen zueinander angeordnet werden
    • Die drei wichtigsten Positionierungsarten in CSS: normaler Fluss, float und absolute Positionierung
    • Anonymous Box Generation im normalen Fluss, Formatting Context, Line Box und Ausrichtung innerhalb der Line Box
    • Float-Reihenfolge, Clearfix sowie die Wechselwirkung zwischen floats und der Höhe des Elternelements
  • Chapter 2: Box sizing in CSS behandelt das Box-Modell und die Unterschiede je nach Positionierungsart
    • height, width und margin werden über unterschiedliche Mechanismen berechnet
    • Um die Berechnung zu verstehen, muss man die aktuell verwendete Positionierungsart zusammen mit dem Berechnungsmechanismus betrachten
  • Chapter 3: Additional properties that influence positioning fasst zusätzliche Eigenschaften und Mechanismen zusammen, die die Anordnung von Boxen beeinflussen
    • Margin Collapsing, negative Margins, Overflow
    • max-width, max-height, min-width, min-height
    • Stacking Context und z-index
    • Der Einfluss von Pseudoelementen auf das Layout
    • Die CSS3-Eigenschaft box-sizing
  • Chapter 4: Flexbox erklärt den CSS-3-Layoutmodus Flexbox
  • Chapter 5: CSS layout - tricks and layout techniques wendet die Inhalte der vorherigen Kapitel auf praktische Probleme an
    • Horizontale und vertikale Zentrierung
    • Funktionsweise von CSS-Grid-Frameworks
    • Mehrspaltige Layouts
    • Häufige Fallstricke und Layout-Tricks
  • Der reference index kann genutzt werden, um bestimmte Konzepte oder Eigenschaften nachzuschlagen und zu den entsprechenden Kapiteln und Abschnitten zu springen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-03-01
Meinungen auf Hacker News

  • Das Erste, was man bei der Erklärung von CSS-Layouts sagen sollte, ist, dass es vier unterschiedliche Layout-Systeme gibt: table, das älteste und in E-Mails immer noch verwendet; float für Bilder im Fließtext; Flexbox, das heute am häufigsten verwendet wird; und Grid, die moderne Alternative zu Tabellen.
    Absolute und fixed Positionierung können ebenfalls wie Hacks verwendet werden, die das Layout umgehen.

    • absolute und fixed sind weder Hacks noch „umgehen“ sie das Layout.
      Beides sind zwei von fünf Positionierungsoptionen, die festlegen, wie Elemente im Dokumentfluss oder innerhalb eines bestimmten Containers platziert werden und sich verhalten: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Die ersten beiden sind eher alternative Layout-Systeme, die vor Flexbox und Grid genutzt wurden.
      Die Eigenschaft float kann auch zusammen mit Grid verwendet werden. Das einfachste und grundlegendste Layout-System, der normale Fluss, fehlt: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Die Aussage, „table sei das älteste CSS-Layout-System und werde noch in E-Mails verwendet“, ist nicht ganz korrekt.
      Tatsächliches HTML-Table-Markup ist eine der ältesten Methoden, Teile einer Webseite nebeneinander anzuordnen, und wird auch in E-Mails verwendet, aber das ist eine andere Frage als CSS.
      In CSS gibt es display: table und verwandte Werte, aber soweit ich mich erinnere, war das in alten IE-Versionen schwieriger zu verwenden als Floats und nur eingeschränkt nutzbar. Auch im modernen Web habe ich kaum gesehen, dass es viel verwendet wird; vielleicht auch, weil die Anforderungen an das umgebende Markup zu strikt sind. Zum Beispiel gibt es keine Möglichkeit, die Reihenfolge zu ändern, und wenn mehrere Zeilen nötig sind, muss man Elemente in das HTML einfügen, die diese Rolle übernehmen.
    • Zusätzlich: Flexbox Froggy ist die beste Methode, Flex zu lernen, und bevor man CSS schreibt, sollte man CSS-Reset-Regeln von jemand anderem übernehmen.
      Denn sie ersetzen altes abwärtskompatibles Verhalten durch vernünftige Standardwerte. Beispiel: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • Table ist nicht das älteste CSS-Layout-System. Das ist das Flow-Layout, und seltsamerweise fehlt es in dieser Liste komplett.

  • Die Erklärung, float werde „verwendet, um Boxen am linken und rechten Rand einer Container-Box zu platzieren“, ist nicht korrekt.
    Mit float kann man das zwar tun, aber seit Flexbox und Grid macht man es nicht mehr so. Weil das Element aus dem normalen Fluss herausgenommen wird, ist es für CSS-Lernende eine verwirrende Methode, Layouts zu erstellen.
    float ist eher ein Satzwerkzeug als ein Layout-Werkzeug. Wenn ein Text sich selbst als pedantic bezeichnet, sollte er sorgfältiger sein.

    • In einer Einführung in HTML/CSS sollte unbedingt erklärt werden, dass diese Techniken ursprünglich ausschließlich für das Rendering von Online-Dokumenten gedacht waren.
      Im Grunde wurden sie als eine Art Microsoft Word für Dateien auf dem Computer anderer Leute entwickelt, und deshalb dienten die meisten frühen Eigenschaften wie float dem Satz-Layout.
    • Alle Elemente in einem Container floaten nach oben im Container und, je nachdem ob die Textrichtung ltr oder rtl ist, nach rechts oder links neben das vorherige Element.
      Wenn kein Platz mehr übrig ist, rutschen sie unter die vorherigen Elemente. Wenn ein Element display: block ist, nimmt es die gesamte horizontale Breite ein, sodass alle folgenden Elemente darunter floaten. Daher der Name float, und so wird die Position von Elementen berechnet.
      Mit float:left|right zwingt man dieses Element, vor anderen Elementen im selben Container nach links oder rechts zu floaten. Wenn der Container Flex oder Grid verwendet, funktioniert das natürlich nicht mehr so.
    • Ein großer Teil von Kapitel 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) behandelt die Komplexität und den speziellen Fluss von Floats und erklärt, wie man dieses Verhalten vorsichtig für andere Zwecke wiederverwenden und anwenden kann.
      Besonders wenn man berücksichtigt, dass es zum Zeitpunkt der Entstehung noch keine Flexbox-/Grid-Layouts gab, halte ich das für eine ausreichend sorgfältige Erklärung.
    • Flexbox-Layout vereinfacht mit diesem Tool den Prozess.
      Es reduziert die Zahl der Eigenschaften, um die man sich kümmern muss: https://flexboxcss.com
    • Ich bin mir nicht sicher, wie man Sidenotes oder Marginalien ohne float platzieren soll.
      Besonders dann, wenn die Notiz an der Referenzstelle mitten in einem Absatz ausgerichtet sein muss.

  • Solche Artikel wirken selbst dann einschüchternd, wenn sie aus der Zeit vor CSS Grid stammen. Mit CSS Grid ist CSS-Layout noch komplexer geworden, und obwohl ich seit 10 Jahren Webentwicklung mache, habe ich bei CSS immer noch das Gefühl, seine Tiefe nicht zu kennen.
    Die Funktionsweise, seltene Edge Cases, interne Abläufe und die enorme Zahl an Features tragen dazu bei; dazu habe ich kürzlich auch einen Artikel geschrieben.
    Noch bevor ich alle Details von Grid Layouting nachvollziehen konnte, kamen subgrid und container queries dazu. Viele der neu hinzugekommenen Properties behandeln so spezielle Fälle, dass ich bezweifle, ob ich sie je brauchen werde (etwa hanging-punctuation, font-palette).
    Allein für die Silbentrennung in Absätzen gibt es mindestens drei Properties, und man weiß vielleicht nicht, dass die Property filter auch eine völlig andere Art von Filtern unterstützt, die SVG verwenden. Man kann sogar den Skalierungsalgorithmus für Bilder anpassen, und border-radius unterstützt auch elliptische Ecken.
    Über jede Technologie kann man so etwas sagen, aber CSS ist anders. Es erledigt zu viele Dinge auf zu viele Arten und ändert sich zu stark, zu schnell: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • Ich frage mich, was mit „Obwohl ich seit 10 Jahren Webentwicklung mache, habe ich bei CSS immer noch das Gefühl, seine Tiefe nicht zu kennen“ gemeint ist.
      Ich arbeite schon länger mit CSS, aber ich versuche mir nicht einmal zu merken, ob es align-items oder justify-content ist, also bleibt es auch nicht hängen. Sobald ich flexbox verwende, öffne ich https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
      Grid merke ich mir noch weniger. Trotzdem kann ich nach ein paar Mal Meckern und WTF meist ziemlich einfach das bauen, was ich will, daher habe ich nicht das Gefühl, die Tiefe nicht zu kennen. Ich habe solche Aussagen über CSS oft gehört, aber in den meisten Fällen finde ich es recht einfach, ohne großen Aufwand das gewünschte Layout zu erstellen. Ich merke mir CSS nur nicht so wie JS.
    • Wenn man sich für CSS-Layout interessiert, würde ich empfehlen, zuerst Flexbox und CSS Grid zu lernen.
      Beide sind gut dokumentiert und relativ intuitiv, und besonders grid hat weniger eigenartiges Verhalten.
      Heutzutage muss man Flow-Layout nicht mehr besonders gut kennen, und float- sowie table-Layouts kann man komplett überspringen. Man sollte sie nur für ihren ursprünglichen Zweck verwenden: schwebende Bilder in Textinhalten und echte Tabellen.
    • Das Problem, das ich bei Frontend-Arbeit ständig sehe, ist, dass alle Artikel als Leser Leute voraussetzen, die in den letzten 15 Jahren laufend auf dem neuesten Stand geblieben sind.
      Als ich zum ersten Mal echte Frontend-Arbeit gemacht und dafür Dollar bekommen habe, habe ich direkt aus Perl DHTML erzeugt. Schon dieses Akronym zu tippen ist so weit aus dem Muscle-Memory-Cache verschwunden, dass meine Finger ins Stocken geraten.
      Ich kenne Frontend ungefähr auf dem Niveau eines Sechsjährigen, der Analysis kann, und es fühlt sich inzwischen so an, als gäbe es keine Möglichkeit mehr aufzuholen.
    • Bei mir ist es ähnlich. Wenn man einfach anfängt, grid überall zu verwenden, funktioniert es meistens gut.
      Allerdings nutze ich plain CSS und habe normalerweise auch keine globalen Stylesheets, was ziemlich hilft.
    • Es könnte schlimmer sein. Es könnte LaTeX sein.

  • Ich entwickle viele UI-Apps und nutze hauptsächlich Angular; heutzutage verwende ich einfach Frameworks wie Bootstrap oder Foundation.
    Die vielen Layout-Optionen von reinem CSS sind gerade bei Responsive Design überwältigend und machen Kopfzerbrechen. Ich habe es mit reinem CSS versucht, aber am Ende verwendet man doch viel Boilerplate und baut etwas, das einem Mini-Framework ähnelt.
    Wenn man keine maßgeschneiderten Designer-Websites baut, sehe ich persönlich keinen Grund, das Rad immer wieder neu zu erfinden.

    • Es gibt zwar immer noch etwas Boilerplate, aber Open Props mag ich als hybriden Ansatz.
      CSS erfindet nicht unbedingt das Rad neu; es kann schwierige Layouts oder Aufgaben, für die früher JS nötig war, einfacher und leistungsfähiger machen.
      Bootstrap ist auch okay, aber wenn man fortgeschrittene Layout-Probleme lösen will, inspiziert man am Ende viele Elemente, um zu sehen, welche Styles tatsächlich angewendet werden. Zumindest war das meine Erfahrung, und deshalb würde ich persönlich auf CSS setzen.
      Das neue Feature, auf das ich mich freue, ist die @scope-Regel; sie dürfte Styles mit Scope deutlich einfacher machen.
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • Moderne CSS-Features wie flexbox, grid und media queries wurden hinzugefügt, um den Bedarf an Frameworks wie Bootstrap zu verringern.

  • Wurde dieser Artikel vor CSS Grid und CSS columns geschrieben?
    Es gibt auch einen Artikel zu z-index: https://philipwalton.com/articles/what-no-one-told-you-about...

    • Genau. Laut https://book.mixu.net/ wurde er 2015 geschrieben, und bei einem 9 Jahre alten Artikel mache ich mir Sorgen, dass er für modernes CSS vielleicht nicht besonders nützlich ist.

  • Dass in Kapitel 3 margin collapsing und negative margins behandelt werden, zeigt, dass dieser Artikel das Verständnis älterer Layout-Techniken priorisiert.
    Beim Umgang mit Legacy-Codebases ist das wertvoll, aber in neuen Projekten sollte man es eher vermeiden.

  • Wie lernt man CSS am besten gründlich? Die offiziellen Dokumente wirken etwas seltsam dabei, was aktuell gültig ist und was nicht.

    • „actual“ im Sinne von „current“ zu verwenden, ist zwar nicht direkt Thema, aber eine meiner liebsten EU-englischen Formulierungen.
      Wenn man bedenkt, dass „current“ auf Niederländisch actueel ist und „actual“ mit daadwerkelijk übersetzt wird, ist das gut nachvollziehbar. Wenn Muttersprachler davon verwirrt sind, kann das sogar hilfreich sein.
    • Meiner Meinung nach ist die beste Methode, immer wieder Dinge zu bauen.
      Das mag auf bestimmte Lernstile zutreffen, aber wenn man tatsächlich Styles und Layouts manipuliert, bekommt man die praktischen Aspekte der Funktionsweise wirklich ins Gefühl.
      Beim Schreiben von CSS ist mein Ziel, so wenig wie möglich zu verwenden. Nicht, weil ich CSS hasse – im Gegenteil, ich finde, es hat zu Unrecht einen schlechten Ruf –, sondern weil man so lernen kann, Layouts effektiver zu stylen, ohne zu viele Deklarationen übereinanderzuschichten.
    • Diese Woche habe ich mich wieder in Frontend-Technologien eingearbeitet und ein wenig Marktrecherche betrieben.
      Die beste Ressource für CSS-Grundlagen war https://web.dev/learn/css, inklusive flexbox und grid.
      Für Design-Guidelines empfehle ich Refactoring UI. Es enthält viele umsetzbare Ratschläge, die in Büchern wie The UX Book fehlen.
      In meinem Projekt nutze ich TailwindCSS von den Autoren von Refactoring UI sowie Daisy-UI-Komponenten, sodass ich praktisch kein raw CSS schreibe. Anfangs fühlt sich TailwindCSS wie ein Rückschritt zu inline CSS an, aber es ist einfach besser als die Alternativen. Ich empfehle, es einmal auszuprobieren.
    • Ich frage mich, was hier mit „offizielle Dokumente“ gemeint ist. Die Spezifikationen[1] oder MDN[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      Ersteres ist kein Lernmaterial für neue Webentwickler. Letzteres ist ebenfalls kein offizielles oder autoritatives Dokument, enthält aber in der Regel Informationen zu Baseline-Unterstützung und Browser-Kompatibilitätstabellen.
    • Es ist gut, flexbox zu lernen, das Box-Modell zu verstehen und insbesondere zu wissen, wann man margin und wann padding verwendet.
      Außerdem sollte man lernen, wie die Kaskade der Styles funktioniert; dann versteht man auch, warum man SCSS und komponentenbasierte Entwicklung nutzt, um sich darum größtenteils nicht kümmern zu müssen.
      Media Queries und das gezielte Ansprechen verschiedener Bildschirmgrößen sollte man ebenfalls lernen. Vor allem muss man sich nicht schämen, im Web nach „how to do x in CSS“ zu suchen. Die Spezifikation ist riesig und es gibt viel auswendig zu lernen; wenn man es nicht über lange Zeit häufig nutzt, kann man sich nicht alles merken.