Layouts ohne Kopfschmerzen â box-sizing: border-box
18. März 2014
Ich weiĂ nicht genau woran es lag, dass ich die CSS3-Eigenschaft box-sizing
so lange ignoriert hatte. Vermutlich daran, dass sie der Internet Explorer 7 nicht unterstĂźtzt und keine akzeptablen Polyfills existieren.
Wie dem auch sei, der IE7 ist nun endlich Geschichte â hĂśchste Zeit, sich diese CSS-Eigenschaft etwas näher anzuschauen.
Kurz gesagt:
Mit box-sizing: border-box
ist endlich ein leicht verständliches CSS-Box-Model verfßgbar, bei dem nicht permanent auf unsemantische Hilfscontainer zurßckgegriffen werden muss.
Klassisches Beispiel: Ein Layout mit einem Hauptbereich und einer Seitenleiste. Man benutzt zwei Divs â das eine bekommt eine Breite von 75%, das andere 25%.
Soweit so gut.
Nun klebt aber der Inhalt direkt am Rand der beiden Bereiche. Also fĂźgt man jeweils einen Innenabstand hinzu â sagen wir padding: 1em
. Und da sich im klassischen CSS-Box-Model die Breite eines Elements errechnet aus
Breite des Inhalts + Innen- und AuĂenabstand + Rand
zerfällt das eigentlich klar definierte Layout in seine Einzelteile.
Beispiel ohne box-sizing
See the Pen Box-sizing demo (without box-sizing) by Mario Fink (@mariofink) on CodePen.
Um dieses Problem im klassischen Box-Model zu beheben, muss der Inhalt jedes Bereiches in einen Hilfscontainer gepackt werden (auch als Gutter bekannt). Wer sein HTML gerne halbwegs semantisch liebt, wird hier die Nase rĂźmpfen.
box-sizing: border-box zur Hilfe!
Um das eigentlich erwartete Ergebnis zu erlangen, genĂźgt es im obigen Beispiel fĂźr die beiden Inhaltscontainer box-sizing auf border-box zu setzen. Nun beziehen sich sowohl Breiten- als auch HĂśhenangaben auf das komplette Element â nicht nur auf den Inhaltsbereich.
Gerade bei komplexeren Layouts erspart das den ein oder anderen Knoten im Gehirn.
Beispiel mit box-sizing: border-box
See the Pen Box-sizing demo (border-box) by Mario Fink (@mariofink) on CodePen.
border-box all the things!
Fßr zukßnftige Projekt sollte man sich an die Empfehlung von Paul Irish halten und sämtlichen HTML Elementen border-box verpassen:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Hilft besser als jede Kopfschmerztablette â versprochen!
Links
* { Box-sizing: Border-box } FTW von Paul Irish Can I use: CSS3 box-sizing Kompatibilitätstabelle