Hauptmenü

Untermenü

CSS3 - Rechnen

1. Das hirnlose Boxmodell

Vielleicht kann sich ja der eine oder andere an meinen geharnischten Kommentar zum offiziellen Box-Modell des W3C erinnern, was ich in Grund und Boden gemacht habe. Microsoft war bei der Entwicklung der Internet Explorers 5 übrigens einer Meinung mit mir und hat ein viel logischeres und vor allem einfacheres Box-Modell entworfen. Da es aber kein Standard war, verschwand es wieder von der Bildfläche. Aber endlich! Nach Jahren haben die Götter des W3C endlich ein Einsehen und schicken uns die Erlösung in Form des guten Box-Modells von Microsoft.

2. Das "neue" Box-Modell

Ist kindisch einfach. Man gibt eine Breite an und alles von padding und border wird dann da hinein gequetscht. Der Vorteil liegt dabei klar auf der Hand. Nehmen wir einfach mal an, dass wir mit relativen Angaben arbeiten. Jetzt soll ein Element die halbe Breite bekommen. Also so.


div.blubb {
  width50%;
  floatleft;
}

Bis dahin kein Problem. Aber was ist, wenn wir jetzt zusätzlich noch ein Innenabstand von meinetwegen 10 Pixel benötigen? Dann fangen die Probleme an, denn nun ist unser Element 50% + 20 Pixeln breit. Und das hat je nach Design schon so manchen Entwickler in den Wahnsinn getrieben.

3. box-sizing

Damit kann man dem Browser explizit mitteilen, welches Box-Modell man nun anwenden möchte. Dabei gibt es naturgemäß nur zwei Möglichkeiten, nämlich content-box und border-box. Letzteres sorgt dann für ein IE5-konformes Verhalten und setzt width als komplette Breiten- oder Höhenangabe.

Formate

Derzeit unterstützen nur der Internet Explorer und Opera das nativ. Firefox, Safari und Chrome benötigen dafür ihre eigenen Erweiterungen.

Beispiel

Mit box-sizing

Bla blubb blubber

Ohne box-sizing

Bla blubb blubber


div.border-box {
  border1px solid #000;
  width200px;
  padding10px;
  box-sizingborder-box;
  -moz-box-sizingborder-box;
  -webkit-box-sizingborder-box;
}
<div class="border-box">
  <p>Bla blubb blubber</p>
</div>

Zwei Tipps

Da wir alle seit nunmehr zig Jahren mit dem offiziellen Box-Modell arbeiten und dementsprechend konditioniert sind, sollte man die Variante mit border-box nur äußerst sparsam einsetzen, da man sonst mit ein paar Nebenwirkungen rechnen muss. Und wenn ihr mich fragt, so ist vom Einsatz bei Höhenangaben abzuraten. Ich selber bin gar nicht mehr aus dem Staunen herausgekommen, wie die Auswirkungen dabei sind.

Und noch eine Info zur Beruhigung. box-sizing wirkt sich nicht auf untergeordnete Elemente aus, wenn man da mit Breiten- oder Höhenangaben arbeitet.

4. calc

Ist als Alternative zu box-sizing gedacht. Allerdings steht immer noch nicht fest, ob es denn im kommenden Standard überhaupt implementiert wird. Mit dieser Funktion kann man einfache Berechnungen durchführen und somit ebenfalls die Probleme umgehen, die das offizielle Box-Modell so mit sich bringt.

Formate

Im Moment kommt nur der Internet Explorer mit der nativen Anwendung klar. Firefox und Chrome benötigen dafür ihre eigenen Erweiterungen (dazu später mehr).

Beispiel

Mit calc

Bla blubb blubber

Ohne calc

Bla blubb blubber


div.calc {
  border1px solid #000;
  width200px;
  padding10px;
  widthcalc(200px 10px);
  width: -moz-calc(200px 10px);
  width: -webkit-calc(200px 10px);
}
<div class="calc">
  <p>Bla blubb blubber</p>
</div>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt