Das Erstellen eines ansprechenden CSS-Layouts beginnt damit, allen Elementen, die in einer Webanwendung platziert werden, Größen zuzuweisen. Eine häufig nachgefragte Funktion war schon immer die Möglichkeit, Größen mithilfe einer Kombination aus Größeneinheiten anzugeben. Es wäre beispielsweise schön, 50% eines Bereichs sowie eine feste Menge an Platz zu reservieren, z. B. 10 Pixel. Das können Sie jetzt mit der Property calc() tun. Sie können diese Funktion überall dort verwenden, wo eine Länge oder Zahl verwendet wird, also zum Positionieren von Dingen oder auch in rgb()-Farbwerten, sodass sie in einem Stylesheet sehr nützlich ist.
Was können Sie mit calc() machen?
Die Eigenschaft calc() kann überall verwendet werden, wo in Ihrem Stylesheet eine CSS-Länge oder -Zahl angegeben ist.
Es bietet Ihnen zwei Hauptfunktionen, um das Layout flexibler zu gestalten:
- Prozentsätze und absolute Werte mischen
- Vermischen von Größeneinheiten.
Prozentsätze mit absoluten Einheiten mischen
Sehen wir uns ein Beispiel für das Mischen 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, würden wir dies dann wie folgt schreiben:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Mit einer Hintergrundfarbe in Grün würde dies so aussehen:
Wenn Sie die übergeordnete Größe verkleinern, sieht sie so aus:
Das Schöne an dieser Stelle ist, dass wir immer wissen, dass sich der rechte Rand des Inhalts 100 Pixel links von der Mitte des Containerbereichs befindet. Durch die Möglichkeit, verschiedene Werttypen auf diese Weise zu kombinieren, kann Ihre Webanwendung das Layout auf Geräten unterschiedlicher Größe mit weitaus mehr Kontrolle als zuvor verarbeiten.
Mischeinheiten
Eine weitere tolle Sache ist die Möglichkeit, Einheiten mit verschiedenen Maßen zu einer Ergebnisgröße zu kombinieren. 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);
}
Einige gute Beispiele für die Kombination von Werten finden Sie hier und hier.
Ausprobieren
Mit calc() können Sie +, -, * und / verwenden, um Werte zu addieren, zu subtrahieren, zu multiplizieren und zu dividieren. Dadurch ergeben sich ganz unterschiedliche Möglichkeiten. Sie können calc() überall dort verwenden, wo eine CSS-Länge oder -Zahl verwendet werden kann. Wir arbeiten daran, bald calc() für Winkel- und Frequenzeigenschaften hinzuzufügen. Die calc()-Eigenschaft für Längen ist jetzt in Chrome 19 (Entwicklerversion) über die Eigenschaft -webkit-calc verfügbar, in Firefox seit Version 8 mit der Eigenschaft -moz-calc und in Internet Explorer seit Version 9 ohne Präfix. Teile uns deine Meinung mit, indem du unten einen Kommentar hinterlässt.