labuero

< frontend developer >

Gridsystem ohne Kopfschmerzen mit box-sizing

Quizfrage: Eine Box hat eine Breite von 200 Pixeln, einen Innenabstand zu allen Seiten von 20 Pixel und einen Rand von 2 Pixel. Wie breit ist die Box? Wer schon ein bisschen mit CSS gearbeitet hat und das Box Modell kennt, der kommt hier auf 244 Pixel. Das ist zum Einen ein etwas krummer Wert und zum Anderen, kann dieses Verhalten in einem CSS Raster auch schnell zu Problemen führen. Um dem Herr zu werden, endet dies meist in vielen zusätzlichen CSS-Klassen oder viel Rechenarbeit beim umstellen des Rasters, was auch wieder zusätzliche Fehlerquellen mit sich bringt. Bisher war das auch für mich Alltag, bis ich dann in einem Vortrag von Vitaly Friedman vom Smashing Magazin saß.

Und was ich dort gelernt habe ist so simpel, dass ich mich fast schäme, dies bisher nicht gekannt zu haben – aber besser spät als nie. Das Zauberwort heißt box-sizing.
Mit dieser neuen CSS 3 Eigenschaft, legt man ein Alternatives Box Modell für sein HTML Element fest. So ist es möglich, dass bei der Angabe der Breite, Innenabstand und Rahmen mit berücksichtigt werden. Im oben genannten Beispiel ist die Box dann auch wirklich nur 200 Pixel breit, egal wie groß padding oder border ausfällt.

Folgende Werte existieren für diese CSS 3 Eigenschaft:

  • content-box: Normales Box-Model – Standard
  • padding-box: padding hat keine Auswirkungen auf die Gesamtbreite
  • border-box: border UND padding hat keine Auswirkung auf die Gesamtbreite
  • margin-box: margin verkleinern ein Element, so das die Gesamtbreite eingehalten wird

Und nun zum Thema Browserunterstützung. Diese ist erstaunlich gut! Sogar der IE8 beherrscht es.
Und für ältere Browser existiert ein entsprechendes Polyfill. Also, kein Grund länger auf dieses nützliche Feature zu verzichten.

Nur die leidigen Prefixe darf man nicht vergessen. Und so sieht das Ganze dann aus:

.box {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.