Hallo und erstmal nachträglich noch einen schönen ersten Advent!

Damit die Vorweihnachtszeit nicht zu langweilig wird, habe ich mir gedacht ich biete euch einen kleinen Adventskalender in Form von 24 Artikeln an. Das heißt, euch erwartet ab heute jeden Tag ein Beitrag zum Thema: Selten benutzte CSS Properties.

Dabei lernt ihr nützliche CSS Properties kennen, von denen ihr bisher vielleicht nicht einmal wusstet, dass es sie gibt. Den Anfang macht heute Box-Sizing.

Browserunterstützung

Die Eigenschaft box-sizing dient zur Steuerung des CSS Box-Models. Das normale W3C-Box-Model besteht aus Width×Height + Padding + Border + Margin. Dabei werden Padding, Border nicht mit bei der Breiten- bzw. Höhenberechnung berücksichtigt. Mit box-sizing kann man dieses Verhalten jedoch ändern und so das “alte” Box-Model des IE6 (Quirks Mode) nutzen.

Browser
ab Version	1.0	3.0	7.0	1.0	8.0

Da eine CSS3-Eigenschaft ist, wird sie noch nicht von allen Browsern in ihrer eigentlichen Schreibweise unterstützt. Gecko- und Webkit-Engines benutzen noch sogenannte Vendor-Prefixes. Als mögliche Werte stehen zwei (für Firefox drei) zur Auswahl:

1. content-box (Default-Wert), spiegelt das W3C-Box-Model wider
2. border-box, damit wird Padding und Border-Width in die Breiten- und Höhenberechnung eingebunden
3. padding-box (nur Firefox), hierbei wird lediglich das Padding mit einberechnet

Eine Zuweisung per CSS würde demnach folgendermaßen aussehen:

1
2
3
4
5

.box-sizing {
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari, Chrome */
	box-sizing:border-box; /* IE8, Opera */
}

Beispiele

Unten stehende Boxen haben die gleichen folgenden CSS-Eigenschaften und unterscheiden sich ausschließlich durch ihr Box-Model. (Ihr könnt es gerne mit Firebug o.ä. nachprüfen )

1
2
3
4
5
6
7
8

.box {
	background-color:#eee;
	border:10px solid #aaa;
	height:60px;
	margin:10px;
	padding:10px;
	width:350px;
}

Wie ihr seht, sind die Boxen unterschiedlich lang, obwohl wir beiden eine Width von 350px gegeben haben. box-sizing mit dem Wert border-box berechnet die Breite (bzw. Höhe) also aus Width (Height) + Padding + Border und nicht wie das normale Box-Model nur aus Width (Height).

Besonders nützlich wird die Eigenschaft, wenn man eine Textarea auf 100% Breite ziehen will und gleichzeitig aber Padding vergeben möchte. Probieren wir es aus:

Die erste Textarea geht 20 Pixel über den Rand hinaus, die zweite verhält sich besser – dank box-sizing!

Und damit wäre Türchen #1 auch schon wieder verputzt, freut euch auf morgen.