Fast zwei Jahrzehnte sind seit meinem ersten Buch, Transcending CSS , das damalige Multi-S?ulen-Layout-Modul von Novel untersucht. Eine aktualisierte, frei verfügbare Online -Version, , die CSS -überarbeitete transzendierte, bietet eine zeitgen?ssische Perspektive. Mein Hintergrund im Druck hat meine anf?ngliche Begeisterung für diese CSS -Funktion wahrscheinlich angeheizt und erm?glicht den Spalteninhalt ohne überflüssiges Markup. Trotz seiner konsequenten Verwendung in meiner Arbeit bleibt die CSS -S?ulen überraschend nicht ausreichend. Warum?

Spezifikationslücken

Mehrspalmungslayout hat seit langem signifikante Einschr?nkungen und weiterhin litten und weiterhin. Wie Rachel Andrew (jetzt ein Spezifikationsredakteur) vor fünf Jahren hervorgehoben hat: Direktes Styling einzelner Spaltenboxen ist nicht m?glich; JavaScript -Manipulation oder Anpassungen an Hintergrund, Polsterung und Margen sind nicht verfügbar. und alle S?ulen bleiben gleichm??ig gro?. Nur Spaltenregeln bieten Stylingoptionen an.

Dies bleibt wahr. Das selektive Styling, wie z. B. wechselnde Hintergrundfarben mit :nth-column(), ist unm?glich. W?hrend die S?ulenregeln border-style Variationen (gestrichelt, gepunktet, fest, Rille, Kamm) erm?glichen, ist das Fehlen von border-image Unterstützung angesichts ihrer nahezu simultanen Einführung r?tselhaft. Diese Unvollkommenheiten existieren, aber sie erkl?ren die weit verbreitete Vernachl?ssigung dieses wertvollen Werkzeugs nicht vollst?ndig.

historische Browser -Inkonsistenzen

?ltere Browser ignorierten oft nicht unterstützte Spalteneigenschaften. Die frühzeitige Einführung des mehrspaltigen Layouts fiel jedoch mit einer Zeit zusammen, in der die Konsistenz von Kreuzbrowser für viele Entwickler kein wichtiges Problem war. W?hrend die anf?ngliche Browserunterstützung inkonsistent war, insbesondere in Bezug auf Inhaltspausen, bieten moderne Browser jetzt eine weit verbreitete Kompatibilit?t. Die Wahrnehmung von CSS -S?ulen als "gebrochen" besteht jedoch unter Entwicklern, mit denen ich gesprochen habe. W?hrend Verbesserungen erforderlich sind, sollte dies die Verwendung seiner derzeit funktionalen Aspekte nicht behindern.

Lesbarkeit und Scrollenbedenken

Die Unterauslastung des Multi-S?ulen-Layouts kann nicht auf Spezifikationsfehler oder Implementierungsprobleme, sondern auf die Herausforderungen der Benutzerfreundlichkeit zurückzuführen sein. Rachel Andrew wies korrekt auf das Potenzial für eine schlechte Lesbarkeit aufgrund einer überm??igen vertikalen Scrollen in Langforminhalten hin. Dies ist unbestreitbar ein negatives Leseerlebnis.

sorgf?ltige überlegung ist entscheidend, aber dies sollte keine Abschreckung sein. Schlechte Designentscheidungen, wie z. B. unangemessene Spalten auf gro?e Textmengen ohne strukturelle Elemente anwenden, sind die wahren Schuldigen. überschriften, Bilder und Zitate k?nnen Spalten effektiv überspannen und die Lesbarkeit verbessern. In Kombination mit Containerabfragen und modernen Textgr??eneinheiten gibt es kaum Grund, ein Multi-S?ulen-Layout zu vermeiden.

Eine schnelle überprüfung von Eigenschaften und Werten

Es gibt zwei prim?re Methoden zum Erstellen von Spalten: Angeben des column-count oder das Definieren des column-width, damit der Browser die Spaltenzahl bestimmen l?sst. Ich bevorzuge column-width, setzt eine Breite (z. B. 18REM) und lasse den Browser die Anzahl der Spalten optimieren.

Die column-gap (Gutter) steuert den Abstand zwischen den Spalten und verwendet idealerweise rem Einheiten für die Proportionalit?t der Textgr??e. Das column-rule fügt eine visuelle Trennung mit anpassbarer Dicke und border-style hinzu. Diese einfache Syntax tr?gt zu ihrer Benutzerfreundlichkeit bei.

Verbesserte Relevanz in modernen CSS

Zum Zeitpunkt der Transzendierung von CSS fehlten viele moderne CSS -Merkmale: rem und Ansichtsfenster, erweiterte Selektoren wie :has(), Containerfragen, Medienfragen für reaktionsschnelles Design, calc(), clamp(), CSS -Raster und Flexbox. Diese Fortschritte verbessern die Funktionen der Mehrfachspalten-Layouts.

rem und Ansichtsfenstereinheiten, gekoppelt mit calc() und clamp(), aktivieren Sie die ansprechende Textgr??e in Spalten. :has() Erm?glicht die Erstellung der bedingten Spalten basierend auf Inhalten. Containerabfragen erm?glichen die Implementierung der Spalten nur, wenn ausreichend Containerraum verfügbar ist. Integration in CSS -Gitter oder Flexbox entsperren noch kreativere Layouts.

Praktische Anwendung: Ein reaktionsschnelles Artikel -Layout

Meine Herausforderung bestand darin, ein flexibles, mediengradfreies Artikel-Layout zu erstellen, das sich an die Bildschirmgr??e und das Vorhandensein/Abwesenheit eines <figure></figure> anpasste. Der Spaltentext verbessert die Lesbarkeit, wobei die Textgr??e an die Containerbreite angepasst wird, nicht die Breite der Ansichtsfenster.

Das HTML ist einfach: ein <main></main> Element, das eine überschrift und Abs?tze enth?lt, und optional ein <figure></figure>.

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="überprüfung des CSS-Mehrspaltlayouts" >

Multi-S?ulen-Layoutstile werden auf <main></main> mit column-width (40Ch), max-width (100Ch) und automatischen Margen zum Zentrieren angewendet:

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

Flexbox wird nur dann auf <section></section> angewendet, wenn es ein <figure></figure>:

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

min-width: min(100%, 30rem) sorgt sowohl für <main></main> als auch für <figure></figure>:

section:has(> figure) main {
  flex: 1;
  margin-inline: 0;
  min-width: min(100%, 30rem);
}

section:has(> figure) figure {
  flex: 4;
  min-width: min(100%, 30rem);
}

Dies beseitigt die Notwendigkeit von Medienfragen. Die Textgr??e passt sich mit Containerabfragen (container-type: inline-size;) und clamp() für reaktionsschnelle Skalierung an:

h1 { font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); }
h2 { font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); }
p { font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

Das Ergebnis ist ein flexibles Layout, das sich an die Bildschirmgr??e und den Inhalt der Bildschirmanpassung annimmt und das Multi-S?ulen-Layout effektiv verwendet.

adressieren Sie frühere Einschr?nkungen

Viele Artikel heben die Fehler von Multi-S?ulen-Layouts hervor, insbesondere beim Scrolling-Problem. Die column-span Eigenschaft (für überschriften, Bilder, Zitate zu Spannungsspalten) mindert dies signifikant zusammen mit sorgf?ltigem Inhaltsdesign, um überm??iges Scrollen zu minimieren.

verwaste überschriften und Zahlen werden mit break-after: column;.

Eine erneute Perspektive auf das Multi-S?ulen-Layout

Trotz seines Alters und seiner früheren Einschr?nkungen bleibt das mehrspalige Layout nicht ausgelastet. W?hrend Herausforderungen bestehen, bleiben der Wert und seine F?higkeit zur Verbesserung des Designs bestehen. Es ist Zeit für einen neuen Blick auf dieses leistungsstarke CSS -Tool.

Das obige ist der detaillierte Inhalt vonüberprüfung des CSS-Mehrspaltlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!