CSS3 Multiple Columns - Mehrspalten Layout-Modul
Die CSS3 Spezifikation haben ein Multi-Column Layout Module, das es sehr einfach macht, Text in Spalten darzustellen.
Eigenschaften
Die erste Gruppe von Eigenschaften setzt die Spalten-Anzahl und deren Breite.column-count Anzahl Spaltencolumn-width Spalten Breitecolumn-min-width Spalten mindest Breitecolumn-width-policy Anzahl Spalten
Die zweite Gruppe beschreibt den Abstand zwischen den Spalten.column-gap Abstand zwischen den Spalten (wie padding)column-rule Rand zwischen den Spalten (wie border)column-rule-color Randfarbecolumn-rule-style Randstylecolumn-rule-width Randbreite
Die dritte Gruppe macht es möglich, dass einzelen Elemente (Titel Definitionen) mehrere Spalten umfassen.column-span Anzahl Kolonnen die das Element umspannen. Wird noch nicht von allen Browsern richtig umgesetzt (s. Screenshot, unten).
Beispiel - Text aus dem Jahr 2004
Sieht vielversprechend aus das Multi-column layout module. Wenn man bedenkt, dass das Multi-column layout module, bereits im Jahr 2001 den Ursprung hatte, ist die Hoffnung eher klein, dass wir dieses Modul in nächster Zeit einsetzten können.
Das W3C arbeitet derzeit an CSS3, das im Jahr 2004 noch fertiggestellt werden soll. CSS3 wird modular, was eine schnellere Weiterentwicklung der einzelnen Module ermöglicht, ohne den Standard zu ändern. Browserhersteller haben es einfacher, die einzelnen Module Schritt für Schritt zu implementieren.
Titel über alle Spalten
W3C bietet im Modul "Multi-column layout" eine Reihe von Eigenschaften an, die ein Spaltenlayout leichter möglich machen. Spalten können dem vorhandenen Platz angepasst werden, der Text fliesst automatisch von einer Spalte in die nächste. Ausserdem ist es möglich, ein Element über mehrere Spalten zu strecken.
CSS war am Anfang die Sprache des font-Tag Ersatzes. Unterdessen hat sie sich zu einer mächtigen Layoutsprache entwickelt. Mit dem Wissen, dass immer noch Browser der Generation 4 am Leben sind, kann man nur hoffen, dass die Browser-Hersteller nicht 6 Jahre zum Implementiern von CSS3 benötigen werden.
Screenshot von «Beispiel - Text aus dem Jahr 2004»
'column-span:all' mit Firefox vs Chrome: Screenshot zeigen (in neuem Tab).
Syntax für column-count
div#multicolumn {
margin:0 0 20px;
column-count:3;
column-gap:20px;
column-rule:1px dotted #000;
}
h2 {
column-span:all;
}
Zusätzlich kann auch eine Spaltenenbreite column-width: 150px definiert werden. Alle Spalten werden 150 pixel breit. Der Browser errechnet wie viele Spalten dieser Breite in die Box passen. Wenn die angegebne Spaltenanzahl 3 beträgt aber nur Platz für 2 Kolonnen à 250 pixel ist werden nur 2 dargestellt.
Browser
Mozilla und Webkit Browser brauchen zur Zeit noch einen Prefix für die richtige Darzustellung.
Browser-Support bei quirksmode.org/css/columns.
-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;
IE interpretiert das erst ab Version 10. Bis dahin wird der normale Textfluss umgesetzt.