CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten

Kein Beitragsbild

Markus Schlegel

Markus Schlegel arbeitet als freier Webdesigner und bloggt über Web- und Icondesign,...

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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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!

(mm), ™

Markus Schlegel

Markus Schlegel arbeitet als freier Webdesigner und bloggt über Web- und Icondesign, Typografie und Usability. Twitter,

Sortiert nach:   neueste | älteste | beste Bewertung
Chris
Gast

Sehr guter Artikel! Was lange währt wird endlich gut, wa? :>

Hans Meisener
Gast

Toller Artikel und sehr ausführlich.

Danke

Gruß Hans

Paloran
Gast

Ich kann mich meinen den beiden ersten Kommentaren nur anschließen, der Artikel ist gut geworden. Ich hoffe auch dass bald richtige schöne Layouts ohne irgendwelche Hacks und CSS Frameworks erstellbar sind. und zwar in allen Browsern, auch in denen von der Firma aus Redmond!!!
Paloran

ThomasO
Gast

Naja, “die schreckliche Phase der Tabellenlayouts” fand ich persönlich nicht so schrecklich ;-)

Die kommenden CSS-Techniken haben interessante Ansätze und Layouts unzusetzen ohne es irgendwie hin basteln zu müssen, wäre ein deutlicher Fortschritt.

sph
Gast

Nett!

Mit den Möglichkeiten von CSS3 wird also wirklich vieles leichter.

…und irgendwann 2015, wenn der Anteil der Browser die CSS3 NICHT unterstützen zu vernachlässigen ist, wird man derartige Techniken vielleicht sogar in der Praxis verwenden können!

Manuela Müller
Mitglied

@sph: So lange würde ich nicht warten. Per “Graceful degradation” beziehungsweise dem kontrollierten Rückfall von CSS3-Eigenschaften in älteren Browsern lassen sich viele der neuen Möglichkeiten auf andere Art ähnlich gut darstellen siehe: http://bit.ly/aRZfzV

Außerdem: Sollten Webdesigner sich auch weiterhin von IE 6 & Co. gängeln lassen und auf bessere und moderne Techniken verzichten? Warum nicht endlich dieser unsäglichen Strategie von Microsoft etwas entgegensetzen – nämlich den Boykott der Redmond-Browser?

sph
Gast

>> “Graceful degradation”

Grundsätzlich eine gute Idee, würde ich aber nicht wie im verlinkten Artikel beschrieben mittels JS lösen, sondernd per Browserweiche und angepasstem Aussehen der Seite.

>> “Boykott der Redmond-Browser”

Genial.

Ich würde gerne dabeisein wenn sie versuchen Ihrem Klienten zu erklären warum sie mehr als die Hälfte seiner potentiellen Kunden boykottieren wollen ;-)

Hasan Aksoy
Gast

Sehr gut!

Damit wird die Arbeit viel einfacher und besser!

Tomasz
Gast

Am parktischsten finde ich die “Box Layout-Modul” Variante.

Miki
Gast

Sehr interessant!

Oliver
Gast

Mit CSS3 und HTML5 geht es der Zukunft entgegen, wahrscheinlich tanzt der IE mal wieder aus der Reihe.
Danke für den tollen Artikel.

trackback

[…] CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten. […]

Bata
Gast
Tut mir wirklich leid, aber wenn man das Floating beherrscht, kann man damit so gut wie alles umsetzen. Und das hat nichts mit Zufall zutun, so wie es hier dargestellt wird. Man muss es eben einmal verstanden haben. Ich kann auch nicht erkennen, was float und clear mit Hacks zutun haben sollen. Das sind ganz normale Anweisungen, die dem Standard entsprechen. Der einzige Grund auf eine neue Technik umzusteigen wäre nur die reine Semantik. Wenn das Vorteile beispielsweise für SEO bringen würde. Der Artikel bietet einen netten Ausblick, der aber mindestens für die kommenden 5 jahre noch komplett belanglos sein… Read more »
Bata
Gast

Mag ja sein, dass einige Browser das schon unterstützen. Das interessiert aber nicht, solange vor allem die IE-Sparte da nicht mitzieht. Was Browser-Ingenieure tolles zaubern interessiert mich auch nur bedingt, ich halte mich lieber an den Standard und garantiere so eine Nutzbarkeit auf allen Geräten.
Dein Artikel ist ja gut, aber spiegelt er momentan noch nicht das wieder, was einsetzbar ist!

Ich musste erstmal nachschlagen, was der clearfix überhaupt ist. Habe ich nämlich noch nie gebraucht und bin bisher immer ohne hingekommen!

webdesign agentur
Gast

hm.. nur schade das so viele browser noch kein css3 unterstützen. wäre verdammt gut wenn das mal endlich standard wäre!

viele grüße, mario

Manuela Müller
Mitglied

@mario

Soo schlecht – mal abgesehen vom IE – sieht es gar nicht aus, wie diese Checkliste von findmebyIP zeigt: http://bit.ly/dtTamB

Es wäre gut, den Web-Nutzern die Installation moderner Browser aktiv schmackhaft zu machen. Die Nachfrage regelt schließlich das Angebot. Solange Webdesigner und Website-Betreiber resignieren und darauf warten, dass Microsoft sich gnädiger weise auch an Standards hält, wird man noch lange warten können.

Marcus
Gast

Nettes ding, leider hängt es mal wieder im ie. Der sollte einfach verboten werden.

mario
Gast

seh ich ganz genauso..
was mich besonders stört, ist: jede ie version ist anders im umgang mit css… ich frag mich nur warum das so ist.. ich werd das gefühl nicht los, dass uns da jemand ärgern möchte ;-)

Klaus
Gast

Da kann ich nur sagen – hoffen wir auf die Zukunft.

Der Artikel ist sehr gut geschrieben!

trackback

[…] CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten | CSS, Layouts, Webdesign | Dr. Web Magazin. […]

trackback

[…] ist ein Template ist eher für Firmen oder Online-Magazine gedacht und arbeitet mit CSS3-Spaltenlyout sowie der Eigenschaft gradient (Farbverlauf). Bei Browsern, die das nicht beherrschen – sprich […]

wpDiscuz