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% - 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
23 Kommentare » Schreibe einen Kommentar