Peter Kröner, Webtechnologie-Erklärbär

Wer zum ersten Mal mit CSS in Berührung kommt, findet das Box Model meist etwas unintuitiv. Wenn man da nämlich einem Element eine Breite oder Höhe gibt und es zusätzlich mit einem Rahmen oder einem Innenabstand versieht, plötzlich breiter und höher als angegeben – denn die Breitenangabe gilt nur für den Inhalt der Elements, nicht für das Element selbst. Manchmal ist dieses Verhalten auch für Nicht-Anfänger etwas unpraktisch. Mit der CSS3-Eigenschaft box-sizing könnte das Problem bald gegessen sein, denn das ist nicht weniger als ein Opt-Out für ein Box Model wie wir es kennen.

Was macht box-sizing?

Mit box-sizing kann man für seine Elemente ein alternatives Boxmodel aktivieren. Normalerweise sähe ein Block-Element mit einer fest definierten Breite, einer Border und etwas Padding so aus:

Die Angabe der Breite (oder auch einer Höhe) betrifft also den Inhalt eines Elements, während das Element selbst durch Borders oder Padding noch höher oder breiter werden kann. Dieses Verhalten kann unter bestimmten Umständen durchaus einige Dinge verkomplizieren, wenn man beispielsweise mit kombinierbaren CSS-Klassen arbeitet.

.standardbox {
    width:256px;
    width:256px;
}
.border-alpha {
    border:16px solid black;
}
.border-beta {
    border:8px solid black;
}

Kombiniert man man die Klasse standardbox mit border-alpha, hat das Endprodukt andere Maße als wenn man border-beta benutzt. Und das kann bei einem Layout mit vielen gefloateten Boxen schnell mal unangenehme Auswirkungen haben. Und genau hier hilft box-sizing. Das oben abgebildete Beispiel sähe mit box-sizing:border-box; so aus:

Also: Mit box-sizing:border-box; legen height und width nicht mehr die Maße des Inhalts eines Elements, sondern die Maße des Elements selbst fest und berücksichtigt dabei Rahmen und Abstände.

Wie benutzt man box-sizing?

Diese Frage ist etwas komplizierter als man meinen möchte. Wie man box-sizing benutzt hängt tatsächlich davon ab, welches CSS-Modul man fragt. Im Moment ist CSS3 ja noch in der Entwicklung und da kommen solche Diskrepanzen zwischen den einzelnen Modulen schon mal vor. Das CSS3 Basic User Interface Module sieht für box-sizing folgende Werte vor:

• content-box: Altes/Normales Box Model
• border-box: Neues Box Model, Rahmen und Innenabstände verbreitern ein Element nicht mehr
• inherit: Vom Elternelement übernehmen (Standardwert)

Beim CSS Advanced Layout Module geht man von folgenden Werten aus:

• content-box: Altes/Normales Box Model (Standardwert)
• padding-box: Neues Box Model, Innenabstände verbreitern ein Element nicht mehr
• border-box: Neues Box Model, Rahmen verbreitern ein Element nicht mehr
• margin-box: Neues Box Model, zusätzliche Außenabstände verkleinern ein Element, so dass seine Breite mit Margin zusammen nicht die vorgegebene Breite überaschreitet

Wie wir wissen kann etwas nur W3C-Standard werden, wenn mindestens zwei unterschiedliche Implementierungen in den gängigen Browsern vorliegen. Und so gesehen spricht einiges dafür, dass die erste Variante Realität wird – denn die findet man bereits in allen Browserfamilien.

Welche Browser unterstützen box-sizing?

Opera kennt box-sizing und Mozilla, Webkit-Browser sowie der IE8 nehmen es mit ihren jeweiligen Prefixen (-moz, -webkit und -ms, also z.B. -moz-box-sizing) an. Dabei handelt es sich jeweils um die Variante aus dem CSS3 Basic User Interface Module mit den möglichen Werten content-box, border-box und inherit. Der Firefox hat zusätzlich noch den padding-box-Modus aus dem Advanced Layout Module implementiert. Für all das gibt es eine Testseite.

Es sieht also wirklich so aus, also könnten wir in absehbarer Zeit dieses nette CSS3-Feature produktiv einsetzen. Die Welt wird dadurch keine andere, aber vielleicht macht box-sizing das eine oder andere etwas einfacher, zumindest den Einstieg in CSS. Webkit, Mozilla und Microsoft müssen nur noch ihre schon vorhandenen Implementierungen fertigstellen.

Die Internet Explorer 6 und 7 müssten natürlich auch noch aussterben – wobei man diesen Versionen theoretisch mittels dieses Scripts box-sizing-Fähigkeiten verpassen könnte. Aber wenn man schon CSS3-Features mit Javascript faken muss, dann vielleicht lieber nur Eyecandy und keine elementaren Layout-Eigenschaften.