Gegen den Strom

Nur tote Fische schwimmen mit dem Strom

CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten

Nachdem die schreckliche Phase der Tabellenlayouts überwunden war, setzten sich glücklicherweise CSS-Layouts durch. Das war zweifelsohne ein Fortschritt, doch rückblickend darf man mit den neuen Techniken auch nicht hundertprozentig zufrieden sein. Spalten realisiert man auch heute noch gezwungenermaßen mit "float", wobei dessen eigentlicher Zweck ein ganz anderer ist. Deshalb sind mit float formatierte Blöcke, die man wie Spalten behandelt, auch schlechter handhabbar. Spaltenlayouts sind in den bisherigen CSS-Standards schlicht nicht vorgesehen. Mit CSS3 soll sich das ändern. Es liegen einige vielversprechende Konzepte vor, die sogar teilweise schon implementiert sind.

Ein Rückblick: Float

Wie gesagt, sind Floats derzeit das weitgehend einzige Mittel, Spaltenlayouts zu erstellen. Weist man einem Block beispielsweise float: left zu, richtet sich dieser am linken Rand aus und lässt die restlichen Elemente rechts an ihm vorbeifließen. Möchte man ein Layout mit drei Spalten realisieren, weist man allen drei Blöcken diese Formatierung zu. Wenn alles glatt geht, sollten diese dann als Spalten nebeneinander stehen. Ein schwerwiegendes Problem taucht zum Beispiel dann auf, wenn man die Spalten in ihrer Höhe begrenzen und darunter weitere Spalten in anderen Proportionen anlegen möchte. Hier hilft nur ein kleiner Hack. Bei der so genannten Clearfix-Technik wird zwischen die entsprechenden Blöcke ein Element, dem die Eigenschaft clear zugewiesen wird, gelegt. Dies führt dazu, dass die oberen Spalten abgebrochen werden und wieder klare Verhältnisse geschaffen sind. Damit man dabei nicht in die Semantik des HTML-Dokuments eingreifen muss, empfiehlt sich die Verwendung des Pseudo-Elements :after.

Eine Technik für den Übergang: Inline-Blocks

Mit display: inline-block verwandelt man ein Element in einen Inline-Block. Dieser vereint nun Eigenschaften von Inline- und Block-Elementen. So lassen sich alle CSS-Eigenschaften, die normalerweise nur Blocks vorbehalten wären, auf dieses Element anwenden, während es sich im Gesamtkontext trotzdem wie ein Inline-Element verhält. Ein grober Merksatz wäre: außen Inline, innen Block. So kann man Inline-Blocks Innen- und Außenabstände, sowie Höhe und Breite zuweisen. Gleichzeitig richten sich mehrere Inline-Blocks in einer Reihe aus – sofern genügend Platz ist. Da sollte man meinen, das mache sie zum Idealen Werkzeug für Mehrspaltenlayouts. Doch es gibt einen Haken. Inline-Blocks verhalten sich im Zusammenspiel mit anderen Elementen wie Inlines. Das wird vor allem dann zu einem Problem, wenn man seinen Quelltext ordentlich formatiert. Denn bekanntlich beeinflusst White-Space – das heißt Leerzeichen und Zeilenumbrüche – die letztliche Textausgabe. Zeilenumbrüche im Quelltext werden zu Leerzeichen in der Ausgabe und mehrere Leerzeichen im Code werden im endgültigen Dokument doch nur zu einem einzigen zusammengefasst. Schreibt man seine HTML-Tags also fein untereinander, das heißt getrennt durch einen Zeilenumbruch, rutscht in der gerenderten Webseite zwischen jeden Block ein kleiner Abstand – ein Leerzeichen. Das macht die Technik ähnlich unhandlich wie Floats. Zwar gäbe es diverse recht einfache Hacks, um dem Problem aus dem Weg zu gehen, doch letztlich bleibt die Aussage: Inline-Blocks sind nicht für Mehrspaltenlayouts gedacht.

Das Template Layout-Modul

ASCII-Art, das sind "Gemälde" aus Buchstaben, Zahlen und Sonderzeichen. Mit dem CSS3 Template Layout-Modul kann man sich in diesem Bereich jetzt auch als Pixelschubser profilieren. Das Modul erweitert die beiden schon vorhandenen Eigenschaften display und position. Anstatt die Display-Eigenschaft beispielsweise mit den Werten block, inline-block oder inline zu belegen, kommen hier die eingangs erwähnten ASCII-Künste zum Einsatz. An einem Beispiel soll die Funktionsweise klar werden.

#outer {
display: "ab"
"cd";
}

#inner1 {
position: a;
}

#inner2 {
position: b;
}

#inner3 {
position: c;
}

#inner4 {
position: d;
}

Der Display-Eigenschaft weist man eine Art Skizze des Templates zu. Mit der Position (position) der inneren Elemente richtet man diese nun an dem vordefinierten Raster aus. Das Einsatzgebiet des Moduls liegt bei herkömmlichen Grids, wie man sie bisher noch von Frameworks wie YAML oder 960.gs erstellen lassen kann. Sollte sich dieses Modul in Zukunft einmal durchgesetzt haben und in allen Browsern implementiert sein, wird man hoffentlich nicht mehr auf Grid-Frameworks zurückgreifen müssen.

Das Multi-Column Layout-Modul

Das Multi-Column Layout-Modul ist das einzige der hier vorgestellten CSS3-Module, dessen Spezifikation bereits als so genannte Candidate Recommendation vorliegt. Das Modul wird am engagiertesten entwickelt, was vor allem daran liegen mag, dass es den Wünschen und Bedürfnissen heutiger Webdesigner am ehesten entspricht. Das System ist intuitiv und entsprechend einfach zu erklären. Im Grunde lässt sich die Funktionsweise mithilfe der Erklärung folgender vier CSS-Eigenschaften zusammenfassen:

column-count
Die Anzahl der Spalten, in die ein Element unterteilt wird.
column-width
Die Breite der Spalten, in die ein Element unterteilt wird.
column-gap
Der Abstand zwischen den jeweiligen Spalten eines Elements.
column-rule
Die Äquivalenz zu border im normalen Box-Modell.

Um das Prinzip zu verstehen, genügt es aber, sich auf column-count und column-width zu beschränken. Weist man einem Element nur die Eigenschaft column-count zu, wird der Block, der normalerweise das Element darstellt, in die entsprechende Anzahl an Spalten unterteilt. Die Breite der Spalten hängt von der Breite des Blocks ab. Weist man einem Element nur die Eigenschaft column-width zu, wird der Block in so viele Spalten mit dieser zugewiesenen Spaltenbreite unterteilt, wie auf der Breite des Blocks nebeneinander Platz finden. Dabei besteht der große Unterschied zu Float-Spalten darin, dass der Inhalt sich gleichmäßig auf alle Spalten verteilt. Man kann sich auch vorstellen, dass der Block zunächst auf die Breite, welche man mit column-width angegeben hat, zusammengepresst wird. Dadurch wächst der Block in der Höhe. Um nun den freigewordenen horizontalen Raum wieder aufzufüllen, wird der Block in der Höhe entsprechend oft geschnitten und die Teile dann neu ausgerichtet.

Das Modul hat deshalb ein sehr eingeschränktes, aber auch klar abgrenzbares Einsatzgebiet, und zwar die Unterteilung von Textblöcken. Mit Multi-Columns können endlich zeitungs- und magazinartige Spaltenlayouts ohne semantische Einbuße oder JavaScript-Hacks umgesetzt werden.

Das Flexible Box Layout-Modul

Dieses Modul erfährt in der Blogosphäre noch am meisten Aufmerksamkeit. Wie das Template-Modul klinkt sich Flexbox in die Display-Eigenschaft eines Elements ein. Mit display: box; wird der Flexible Box-Modus initialisiert. Das Grundprinzip von Flexbox ist recht schnell erklärt. In der Spezifikation selbst wird das Modul als ein optimiertes Box-Modell, das zu den bestehenden Modellen hinzukommt, beschrieben. Wie der Name schon verrät, geht es um flexible Boxen, die sich entweder vertikal oder horizontal ausdehnen oder sich den Platz mit anderen flexiblen Elementen teilen. Nachdem man einem Element den display-Wert box zugewiesen hat, kann man mit box-orient festlegen, ob man die Kind-Elemente vertikal oder horizontal ausrichten möchte und mit box-align wird spezifiziert, wie die Kind-Elemente mit übrig gebliebenem Platz umgehen. Den Kind-Elementen selbst weist man dann noch die Eigenschaft box-flex und einen Zahlenwert zu. Je höher der angegebene Wert, desto mehr Platz bekommt das Element später ab; vorausgesetzt, box-align steht auf stretch.

.outer {
display: box;
box-orient: horizontal;
box-align: stretch;
}

.inner-strong {
box-flex: 3;
}

.inner-weak {
box-flex: 1;
}

Das Grid-Modul

Wie auch die Templates, ist das Grid-Modul für – der Name sagt es – Grids gedacht. Das Grid-Modul steht nicht alleine, sondern bezieht sich auch auf andere Layout-Module, wie Tabellen oder Multi-Column-Elemente, denn diese erzeugen implizit schon ein Grid. Ist dies noch nicht gegeben, kann man mit columns ein Grid mit einer festgelegten Anzahl an Spalten definieren. Der Dreh- und Angelpunkt des Moduls sind die Eigenschaften grid-columns und grid-rows, die in einer kompliziert erscheinenden Syntax belegt werden können. Am besten erklärt sich das System anhand eines Beispiels.

.outer {
grid-columns: 50% * * 200px;
}

Hierbei wird ein horizontales Grid mit vier Spalten erzeugt. Die erste Spalte nimmt die Hälfte des verfügbaren Platzes, die letzte genau 200px ein. Die anderen beiden Spalten teilen sich den restlichen Platz. Die Elemente, die innerhalb dieses Grids laufen, können nun entweder ganz normal behandelt werden, oder aber man weist ihnen eine spezielle Position im Grid und eine spezielle Breite oder Höhe, bezogen auf das Grid, zu.

.inner {
width: 1gr;
float: top left column;
}

Die neue Einheit gr steht dabei immer für eine Spalten- oder Zeilenbreite/-höhe.

Nachwort

Alle diese CSS-Techniken hören sich vielversprechend an. Da sich die Einsatzgebiete und vor allem -möglichkeiten von Templates, Multi-Column, Flexbox und Grids teilweise zu überschneiden scheinen, bleibt zu hoffen, dass das W3C in den Spezifikationen noch klarere Grenzen zieht, in welchem Fall sich welche Methode am besten eignet. Dieser Artikel soll einen ersten Überblick über die neuen Möglichkeiten geben. Am meisten Hoffnung machen auf jeden Fall das Multi-Column-Layout-Modul und das Flexible-Box-Layout-Modul, zumal diese schon in einigen modernen Browsern implementiert sind. Hoffen wir, dass die Zeiten der alten Float-Spalten bald vorbei sein werden! Quelle

Aktuelle Seite: Startseite Webdesign Webdesign CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten