Überprüfung des CSS-Mehrspaltlayouts

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 id="About-Patty">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>:

enthält

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>:

Reaktionsfähigkeit

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;.

behandelt

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!