Bei dem bestehenden, mit CSS1 eingeführten Box-Modell ergibt sich die Gesamtbreite einer Box aus der Addition des Inhaltsbereiches (width), der Innenabstände (padding) und der Rahmen (border). Aus dieser Regelung ergeben sich für die moderne Layoutgestaltung jedoch einige Nachteile. So lässt sich beispielsweise die Gesamtbreite einer Box nur dann im Vorfeld ermitteln, wenn innerhalb der einzelnen Bestandteile (width, padding und border) keine unterschiedlichen Maßeinheiten verwendet werden. Sollen alle Bestandteile des Box-Modells zum Einsatz kommen, so reduzieren sich die sinnvoll verwendbaren Maßeinheiten auf [px] und [em], denn Rahmenbreiten in Prozentangaben sind bisher nicht erlaubt. Die Freiheiten des Seitenerstellers sind damit von vornherein stark einschränkt.

Verwendet man hingegen unterschiedliche Maßeinheiten – Breite des Inhaltsbereiches als Prozentwert, Innenabstände in [em] und Rahmenbreiten in [px] – lässt sich mit dem derzeitigen Box-Modell die Gesamtbreite einer Box nicht mehr exakt bestimmen. Während die Breite des Inhaltsbereiches des Containers direkt angegeben werden kann, kann die Gesamtbreite der Box (der für die Layoutgestaltung wichtigere Wert) erst beim Rendering dynamisch vom Browser ermittelt werden. Dieser Umstand verkompliziert derzeit die Erstellung flexibler Layouts noch unnötig. Beseitigen lässt sich diese Designschwäche von CSS bisher nur durch die Verschachtelung mehrerer Boxen, also mit zusätzlichem Markup.

Mit der Eigenschaft „box-sizing“ hält ein alternatives Box-Modell Einzug in CSS3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch „box-sizing:border-box“ die Angaben für „width“ als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert. Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben „padding“ und „border“ keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht. Das neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS1 (box-sizing:content-box) und dem alternativen Modell von CSS3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

Der aktuelle Entwurf für CSS3 enthält noch einen weiteren interessanten Ansatz, um dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
float:left;
padding: 0 1em;
border-right: 1px #888 dotted
width: calc( 30% - 2*1em - 1px );
}
#right {
float:right;
padding: 0 1em;
width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion „calc()“ ist es eigentlich egal, ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für die Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Noch heute basieren viele Layouts auf Tabellenkonstrukten – dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung. Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS3 wird der allseits beliebte Spaltensatz über die Eigenschaft „column“ nun endlich Einzug in den CSS-Standard finden.

#3col_container {
column-count: 3;
column-gap: 20px;
...
}

Über die Eigenschaften „column-count“ wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für „column-gap“ regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten. Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte

Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen. Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS3-Spaltensatzes machen, wenn Sie den beiden Links [1] und [2] mit dem Firefox-Browser folgen, der die Eigenschaft bereits unterstützt.

Im ersten Moment sieht die Zukunft aus wie ein Schlaraffenland. Wenn da nicht die Bedenken wären, die sich immer klarer abzeichnen. Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen, ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der Internet Explorer 5 bot eine recht ordentliche CSS2-Unterstützung, doch erst mit dem frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen sechs Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen. Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und diese jeweils in zahlreichen, mindestens zwei oder sogar mehr Generationsstufen unterstützen. Dies wird sich auch nach der Einführung von CSS3 nicht ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen. Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht ist dabei noch fraglich, denn beispielsweise beim Spaltensatz könnten mit CSS3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammenschrumpfen. Die Möglichkeiten von CSS3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Wer in dem neuen Box-Modell das Konzept der alten Internet-Explorer-Versionen erkannt hat, liegt nicht falsch. Microsoft hat bereits beim Internet Explorer 5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert. Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung erschwert. Der Internet Explorer 6 hat das Box-Modell zumindest im standardkonformem Darstellungsmodus korrekt interpretiert, im Internet Explorer 7 funktioniert es endlich auch im Quirks-Modus (Modus zur Sicherung der Abwärtskompatibilität).

CSS3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Auf Grund der bisher ungelösten Probleme für den Übergang von CSS2 auf CSS3 erscheint es sinnvoll, dass der Wechsel noch eine Weile auf sich warten lässt. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen. Niemandem ist mit einem fehlerbehafteten CSS3-Browser geholfen. Einige der wichtigsten Browser werden vermutlich mehr als nur einen Generationswechsel benötigen, um den neuen Standard zu unterstützen.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen CSS3-Funktionen. In den weiterführenden Links, die Sie über den Softlink am Ende des Artikels erreichen, finden Sie einige Beispielseiten, auf denen Sie in Verbindung mit dem Firefox-Browser schon mal CSS3-Luft schnuppern können.

Der Artikel wurde urspünglich am 10.12.2006 im Adventskalender der
Webkrauts

[3] veröffentlicht.