nicht angemeldet
CSS3 lernt mit der Funktion calc() rechnen / Vergleich mit box-sizing
Mit einer neuen Methode soll es in CSS3 möglich sein, Werte zu berechnen und somit absolute und relative Einheiten in Beziehung zueinander zu setzen, was den Umgang mit dem Boxmodell erleichtern würde.
CSS bis einschließlich Version 2.1 erlaubt die Zuweisung relativer oder absoluter Werte, beispielsweise mittels width einer Breite von 100%, 30em oder 200px. Problematisch ist dies vor allem dann, wenn Einheiten gemischt notiert werden müssen, da eine Umrechnung nicht zuverlässig möglich ist.
Das am weitesten verbreitete Problem dürfte die Kombination aus width:100% und padding/margin/border darstellen. Da deren Werte gemäß CSS-Boxmodell addiert werden, ergibt sich eine Breite von über 100 Prozent. Zwar soll es künftig möglich sein, W3C-konformen Browsern mittels box-sizing das Box-Modell des Internet Explorer aufzuzwingen, doch wäre es wünschenswert, Ausmaße in der Form em ± px notieren zu können.
Der am 19.09.2006 veröffentlichte Entwurf des CSS3-Werte- und Einheiten-Moduls enthält eine interessante Funktion namens calc(), die nun genau das ermöglichen soll.
Gegeben seien zwei Elemente mit den IDs a und b, die sich den verfügbaren Platz teilen und einen Rahmen von 3px Stärke aufweisen sollen.
Beispiel für calc()
#a, #b {
float:left;
border:3px double black;
width:calc(100%/2 - 2*3px);
}Die innerhalb von calc() definierten Größen werden vor der Anwendung auf die Elemente berechnet. Daraus ergibt sich für width effektiv eine Innenbreite von 50% minus zweimal 3px, die vom linken und rechten Rahmen vereinnahmt werden. In Summe, das heißt nach Addition von width und border gemäß W3C ergibt sich eine Gesamtbreite von jeweils 50 Prozent:
50
0% - 6px gemäß calc()
+ 6px Rahmen links und rechts
---------
50% Gesamtbreite
Ergebnis: Die Elemente werden wie gewünscht nebeneinander dargestellt.
Beispiel für box-sizing
#a, #b {
float:left;
border:3px double black;
width:50%;
box-sizing:border-box;
}
Ergebnis: wie oben, da die 50 Prozent für die Außenbreite einschließlich Rahmen gelten und der Inhalt entsprechend schrumpft.
Offen ist, ob Autoren eher auf calc() und das ursprüngliche W3C-Boxmodell, oder auf box-sizing:border-box (das für den Mac-Internet Explorer erfunden wurde) und das MS-Boxmodell setzen werden. Derzeit hat box-sizing die Nase weit vorne, da diese Eigenschaft von IE für Mac, Mozilla/Firefox (nur mit Präfix -moz-), Opera und Safari bereits unterstützt wird, calc() dagegen von keinem einzigen Browser, liebe Standardistas …
SELF-Wiki: Berechnungen- Die calc()-Funktion