Einer der am meist bekannten vermeintlichen “Bugs” der richtig alten Internet Explorer Versionen (IE6 in “Quirks Mode” oder älter) ist sicherlich die Darstellung von Elementen mit einer bestimmten Breite (width) und definiertem Innenabstand (padding):
Der Box-Modell-Fehler.
Jeder andere Browser interpretiert ein Block-Element (wie beispielsweise ein p– oder div-Element) mit einer Breite von 200 Pixeln, einem Innenabstand von 10 Pixeln und einem Rahmen mit jeweils 5 Pixeln Breite wie folgt:
200px Breite + 2x10px Padding + 2x5px Border = 230px Gesamtbreite
Eigentlich ein bisschen komisch, wenn man mal drüber nachdenkt: Man definiert die Breite eines Elementes, welches einen bestimmten Inhalt hat. Man stellt fest, dass der Inhalt genau mit der Breite der Box abschließt, was eventuell nicht so gut aussieht und entschließt sich einen Abstand hinzuzufügen. Auf einmal ist die Box allerdings viel breiter, als die Breite die man zuvor definiert hat. Um diesem Problem zu begegnen muss man also jedes mal, wenn man den Innenabstand eines Elements ändert auch die Breite entsprechend anpassen.
Microsoft dachte sich damals, dass es viel intuitiver ist, wenn der Abstand vom Browser in die Breite des Elements eingerechnet wird. Fand irgendwie keiner cool – außer Microsoft.
Das Web entwickelte sich weiter und mit CSS3 wurde der Gedanke von Microsoft wieder aufgegriffen und die Eigenschaft box-sizing eingeführt.
box-sizing definiert, wie sich ein Element in seiner Breite verhalten soll. Diese Eigenschaft ist schon seit einiger Zeit in den meisten Browsern standardisiert, wird allerdings trotzdem häufig vergessen.
Eigenschaftswerte
Es gibt zwei Werte, die von der CSS3 Spezifikation für das “CSS3 Basic User Interface Module” standardisiert sind. Das sind content-box und border-box. Der Wert content-box ist dabei das in CSS2 bereits standardisierte Box-Modell; wobei border-box sich auf das Box-Modell des alten Internet Explorer bezieht.
Eine Demo der beiden verschiedenen Werte hat Workingdraft-Kollege Peter Kröner bereits in seinem Artikel zum Thema gezeigt.
Mozillas Implementierung von box-sizing bietet zusätzlich noch den Wert padding-box an, der praktisch einen Zwischenwert der beiden anderen Werte bietet: Die Rahmen-Breite (border-width) wird nicht mit zur Gesamtbreite hinzugerechnet, jedoch der Innenabstand.
Browsersupport
Das ist klasse: box-sizing wird von fast allen Browsern unterstützt.
Einige Besonderheiten gibt es allerdings: Im Mozilla Firefox braucht man immer noch das -moz-Vendor-Prefix. Es gibt seit langer Zeit diesen Bug der aber leider in der Standard-Version – ohne Prefix – immer noch nicht implementiert ist. Für den Internet Explorer 8 ist das -ms-Prefix nötig. Ältere Versionen des Internet Explorers unterstützen diese Eigenschaft nicht. Erstaunlicherweise wird sie allerdings von allen mobilen Browsern vollständig unterstützt.
Der Vollständigkeit halber sei erwähnt, dass es auch für diese Eigenschaft einen Polyfill gibt. Er wurde von Christian Schäfer entwickelt, der ja auch schon beim CSS3-Adventskalender dieses Jahr geschrieben hat und ist auf GitHub zu finden. Für alle Entwickler, die sich mit den älteren IE-Versionen beschäftigen müssen, sicherlich sehr hilfreich.
Fazit
Durch den optimalen Browsersupport der Eigenschaft kann diese ohne Bedenken eingesetzt werden. Wer oldIE supportet sollte sich allerdings über den Einsatz eines Polyfills Gedanken machen. Oft ist aber die pixel-genaue Darstellung in älteren Browsern gar nicht nötig.
Hans Christian Reinl ist heute unser Gastautor im CSS3 Adventskalender. Hans ist Frontend Webdeveloper und arbeitet gerade in Freiburg bei der Agentur /gebrüderheitz sowie als Freiberufler.
In seinem Blog drublic.de schreibt er auf englisch einiges über Cutting-Edge-Webtechnologien. Auf Twitter ist er als @drublic unterwegs und auf Google+ sowie GitHub zu finden.
Für Fragen stehe ich gerne zur Verfügung. Schreibt einfach einen Kommentar oder haut mich auf Twitter an.
Weiterführende Informationen
Weiterführende Informationen zu box-sizing finden sich im MDN und in Chris Coyiers Artikel zum Thema. Auch PPK hat darüber gebloggt.
2 thoughts on “Box-Sizing – CSS3 Adventskalender Tag 23”
Kommentare sind geschlossen.