Das Erstellen eines ansprechenden CSS-Layouts beginnt damit, allen Elementen in einer Webanwendung Größen zuzuweisen. Eines der am häufigsten angefragten Features war immer die Möglichkeit, Größen mit einer Mischung aus verschiedenen Maßeinheiten anzugeben. Es wäre beispielsweise schön, 50% eines Bereichs plus einen festen Bereich, z. B. 10 px, reservieren zu können. Das ist mit der Property calc() jetzt schon möglich. Sie können diese Funktion überall dort verwenden, wo eine Länge oder Zahl verwendet wird, also auch für die Positionierung von Elementen oder in rgb()-Farbwerten. Sie bietet also viele Möglichkeiten in einem Stylesheet.
Was kann ich mit calc() tun?
Die Property calc() kann überall dort verwendet werden, wo sich in Ihrem Stylesheet eine CSS-Länge oder -Zahl befindet.
Es bietet zwei Hauptfunktionen, um das Layout flexibler zu gestalten:
- Prozentsätze und absolute Werte werden vermischt.
- Verschiedene Maßeinheiten für die Größe verwenden
Prozentsätze mit absoluten Einheiten kombinieren
Sehen wir uns ein Beispiel für die Kombination von Prozentsätzen mit absoluten Einheiten an. Angenommen, wir möchten 50% der verfügbaren Fläche abzüglich einer festen Anzahl von Pixeln zuweisen, könnten wir das so schreiben:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Bei einer grünen Hintergrundfarbe würde das so aussehen:
Wenn Sie die Größe des übergeordneten Elements verkleinern, sieht das so aus:
Der Vorteil dabei ist, dass wir immer wissen, dass der rechte Rand des Inhalts 100 Pixel links von der Mitte des enthaltenden Bereichs liegt. Wenn Sie verschiedene Wertetypen auf diese Weise kombinieren können, kann die Webanwendung das Layout auf Geräten unterschiedlicher Größe mit viel größerer Kontrolle als zuvor verarbeiten.
Mischeinheiten
Außerdem ist es möglich, Einheiten mit unterschiedlichen Maßen zu kombinieren, um eine Größe zu erhalten. Sie können beispielsweise Größen relativ zur aktuellen Schriftgröße festlegen, indem Sie die Einheiten „em“ und „px“ mischen.
#bar {
height: calc(10em + 3px);
}
Hier und hier finden Sie einige gute Beispiele für die Kombination von Werten.
Jetzt ausprobieren
Mit calc() können Sie mit den Zeichen +, −, * und / Werte addieren, subtrahieren, multiplizieren und dividieren. Sie können calc() überall dort verwenden, wo eine CSS-Länge oder -Zahl verwendet werden kann. Außerdem arbeiten wir daran, calc() bald für Winkel- und Frequenzeigenschaften hinzuzufügen. Die Eigenschaft calc() für Längen ist jetzt in Chrome 19 (Entwicklerversion) mithilfe der Eigenschaft -webkit-calc, in Firefox seit Version 8 mithilfe der Eigenschaft -moz-calc und in Internet Explorer seit Version 9 ohne Präfix verfügbar. Lass uns gern einen Kommentar da.