CSS3 mit 4 Boxmodellen?

Vor vielen, vielen Jahren gab es die Browserkriege, aus denen der Internet Explorer (IE) gegenüber dem NetscapeNavigator (NN) als klarer Sieger hervorging. Zu diesen Zeiten versuchte sich eine Organisation namens W3C zu etablieren, mit dem klaren Ziel, browserübergreifende Standards zu etablieren. Was ja auch Sinn macht, denn niemand möchte für jede Seite einen speziellen Browser benutzen müssen.

Ein wichtiges Ziel des W3C war es damals, Microsoft und den IE in die Schranken zu weisen. Es kann ja nicht sein, dass ein Marktführer bestimmt, was Standard wird und was nicht. Und so kam es, dass sich das eigentlich sinnvolle Boxmodell des IE nicht durchsetzen konnte, weil das W3C sein (weniger sinnvolles) Boxmodell zusammen mit den anderen Browserherstellern durchgepeitscht hat.

Nach dem Motto "Der klügere gibt nach" verwendet der IE ab Version 6 im standardkompatiblen Modus (bei korrektem Doctype) das uns heute allen bekannte Boxmodell, das wohl in der Zukunft als "content-box" eines von mehreren Boxmodellen sein wird.

---

Nun geisterten bereits vor einiger Zeit Meldungen durch Klein-Bloggersdorf, dass mit CSS3 ein alternatives Boxmodell namens "border-box" eingeführt werden soll. Der aufmerksame Leser mit (X)html- und CSS-Kenntnissen hat sofort bemerkt, dass es sich hier um das Boxmodell des IE handelt, das im Machtkampf zwischen Microsoft und W3C zu Zeiten der Browserkriege im Zuge der Vernunft von Microsoft fallen gelassen wurde.

Jetzt musste sich das W3C natürlich den Vorwurf gefallen lassen, dass es sein unvernünftiges Boxmodell damals aus Prinzip durchgepeitscht hat, und nun still und leise das besiegte, aber sinnvolle IE-Boxmodell, wenn auch nur als Alternative, wieder einführen will.

Das geht natürlich so nicht, also wird in CSS3 wahrscheinlich zum ganz grossen Schlag ausgeholt und gleich 4 Boxmodelle etabliert, von denen eines zufällig und logischerweise dem alten IE-Boxmodell entspricht.

Die 4 Boxmodelle in CSS3

 Angedacht sind folgende 4 Boxmodelle:

content-box

hierbei handelt es sich um dasBoxmodell, das wir alle kennen: width bezieht sich auf den Inhalt, padding, border und margin kommen noch dazu und bestimmen die Geamtbreite, die die Box einnimmt:

1 x width + 2 x padding + 2 x border + 2 x margin

padding-box

width schliesst padding mit ein, Gesamtbreite der Box:

1 x width + 2 x border + 2 x margin

border-box

Das alte IE-Boxmodell, width schliesst padding und border mit ein, Gesamtbreite der Box:

1 x width + 2 x margin

margin-box

width schliesst padding, border und margin mit ein, Gesamtbreite der Box:

1 x width

Eingebunden werden diese CSS-Eigenschaften mit

{… box-sizing:border-box; …}

Was wird kommen?

Nun, niemand weiss nichts so genaues. Border-Box ist wohl gesetzt, inwieweit auch die anderen Boxmodelle zum Standard erhoben werden steht wohl noch in den Sternen. Und es wird wohl ein paar weitere Jahre dauern, bis wir diese Boxmodelle allen verbreiteten Browsern anvertrauen können.

Eines sehe ich jedoch ganz klar kommen:

Wenn ich an die verschiedenen Bugs in den verschiedenen Browsern schon bei EINEM Boxmodell denke (und das bei weitem nicht nur im IE), wird mir beim Gedanken an eine Zukunft mit 4 verschiedenen Boxmodellen schon ganz schlecht.

Browser A hat ein Problem mit padding-box, Browser B versagt bei border-box, Browser XYZ …

Deshalb habe ich mir einen eigenen Umgang mit den Boxmodellen angewöhnt. Jeder Bereich (header, locator, sidebar, footer usw.) hat ein äusseres und ein inneres div.

Das äussere div bekommt per CSS lediglich Angaben zu width, float und clear. Kein padding, kein margin, kein border und auch sonst nix. Diese äussere Box bleibt also unsichtbar und nimmt aber in allen Browsern den gleichen Platz ein.

Die innere Box bekommt KEINE Angaben zu width und float, somit dehnt sie sich immer zu 100% innerhalb der äusseren Box aus. Diese innere Box wird nun per CSS gestaltet und kann mittels margin innerhalb der äusseren Box zurechtgerückt werden.

Nur so ist das Layout weitgehend browser- und zukunftssicher. Aber dazu habe ich ja schon vor langer, langer Zeit etwas gerschrieben:

CSS Boxmodell Chaos – die Lösung »

Montag, 2. März 2009, 18:23 Uhr

nach oben

Kommentare und Pings sind derzeit nicht erlaubt.

zum Kommentar-Eingabeformular (Kommentare überspringen) »

Ein Kommentar zu “CSS3 mit 4 Boxmodellen?”

1. Jannis Gerlinger
   Am 1. Februar 2010 um 11:55 Uhr

   Sehr schön erklärt. Ich bin gespannt wann css3 sich endlich durchsetzt!