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 {
width: 50%;
float: left;
}
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
- 18.0
- 12.x
- 5.1
- 23.0
- 8.0 - 10.0
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 {
border: 1px solid #000;
width: 200px;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-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
- 18.0
- 23.0
- 9.0/10.0
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 {
border: 1px solid #000;
width: 200px;
padding: 10px;
width: calc(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