calc()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die calc() CSS Funktion ermöglicht es Ihnen, Berechnungen bei der Angabe von CSS-Eigenschaftswerten durchzuführen. Sie kann mit Werten vom Typ <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> und <color-function> verwendet werden.

Probieren Sie es aus

Syntax

css
/* calc(expression) */
calc(100% - 80px)

/* Expression with a CSS function */
calc(100px * sin(pi / 2))

/* Expression containing a variable */
calc(var(--hue) + 180)

/* Expression with color channels in relative colors */
lch(from aquamarine l c calc(h + 180))

Die calc()-Funktion nimmt einen einzigen Ausdruck als Parameter, und das Ergebnis des Ausdrucks wird als Wert für eine CSS-Eigenschaft verwendet. In diesem Ausdruck können die Operanden unter Verwendung der unten aufgeführten Operatoren kombiniert werden. Wenn der Ausdruck mehrere Operanden enthält, verwendet calc() die Standard-Operatorvorrangsregeln:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operand von dem ersten Operand.

*

Multipliziert die angegebenen Operanden.

/

Dividiert den linken Operand (Dividend) durch den rechten Operand (Divisor).

Alle Operanden, außer solche vom Typ <number>, müssen mit einem geeigneten Einheitenstring wie px, em oder % versehen sein. Sie können in Ihrem Ausdruck für jeden Operand eine andere Einheit verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnung festzulegen, wenn nötig.

Beschreibung

Es gibt einige Punkte zu beachten bei calc(), die in den unten aufgeführten Abschnitten detailliert sind.

Resultierende Werte

Die calc()-Funktion muss als vollständiger CSS-Wert eines der folgenden Typen stehen:

calc() kann nicht nur den numerischen Teil von Prozentwerten, Längenwerten usw. ersetzen, ohne auch die Einheit danach zu ersetzen. Zum Beispiel ist calc(100 / 4)% ungültig, während calc(100% / 4) gültig ist.

Der resultierende Wert von calc() muss mit dem Kontext, in dem er verwendet wird, kompatibel sein. Zum Beispiel, margin: calc(1px + 2px) ist gültig, aber margin: calc(1 + 2) nicht: es ist gleichbedeutend mit der Angabe von margin: 3, was dazu führt, dass die Eigenschaft ignoriert wird.

Wenn ein <integer> erwartet wird, kann der calc()-Ausdruck auch zu einem <number> ausgewertet werden, welcher auf die nächste ganze Zahl gerundet wird. So resultiert calc(1.4) in einem Wert von 1. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert zur positiven Unendlichkeit gerundet. Zum Beispiel resultiert calc(1.5) in einem Wert von 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Fließkommazahlenarithmetik nach dem IEEE-754 Standard durch, was einige Überlegungen bezüglich der infinity- und NaN-Werte mit sich bringt. Für weitere Details, wie Konstanten serialisiert werden, siehe die Seite calc-keyword.

Eingabebedingungen

  • calc() kann keine Berechnungen auf intrinsischen Größenwerten wie auto und fit-content durchführen. Verwenden Sie stattdessen die Funktion calc-size().
  • Die *- und /-Operatoren erfordern keinen Leerraum, aber das Hinzufügen ist zur Konsistenz empfohlen.
  • Es ist erlaubt, calc()-Funktionen zu verschachteln, in welchem Fall die inneren als einfache Klammern behandelt werden.
  • Aktuelle Implementierungen erfordern, dass bei Verwendung der *- und /-Operatoren einer der Operanden einheitenlos ist. Für / muss der rechte Operand einheitenlos sein. Zum Beispiel ist font-size: calc(1.25rem / 1.25) gültig, aber font-size: calc(1.25rem / 125%) ungültig.
  • Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen auf Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layouttabellen umfassen, können behandelt werden, als ob auto angegeben ist.
  • Siehe <calc-sum> für weitere Informationen über die Syntax von +- und --Ausdrücken.

Unterstützung zur Berechnung von Farbkanälen in relativen Farben

Die calc()-Funktion kann verwendet werden, um Farbkanäle direkt im Kontext von relativen Farben anzupassen. Dies ermöglicht dynamische Anpassungen der Farbkanäle in Farbmodellen wie rgb(), hsl() und lch().

Die relative Farbsyntax definiert mehrere Farbkanal-Schlüsselwörter, von denen jedes den Wert des Farbkanals als <number> darstellt (siehe Kanalwerte lösen sich in <number>-Werte auf für weitere Informationen). Die calc()-Funktion kann diese Farbkanal-Schlüsselwörter verwenden, um dynamische Anpassungen an den Farbkanälen vorzunehmen, zum Beispiel calc(r + 10).

Formale Syntax

<calc()> = 
calc( <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Barrierefreiheit

Wenn calc() zur Steuerung der Textgröße verwendet wird, achten Sie darauf, dass einer der Werte eine relative Längeneinheit beinhaltet, zum Beispiel:

css
h1 {
  font-size: calc(1.5rem + 3vw);
}

Dies stellt sicher, dass sich die Textgröße skaliert, wenn die Seite vergrößert wird.

Beispiele

Positionierung eines Objekts auf dem Bildschirm mit einem Rand

calc() erleichtert die Positionierung eines Objekts mit einem festgelegten Rand. In diesem Beispiel erstellt das CSS ein Banner, das sich über das Fenster erstreckt, mit einem 40-Pixel-Abstand zwischen beiden Seiten des Banners und den Kanten des Fensters:

css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
html
<div class="banner">This is a banner!</div>

Automatische Größenanpassung von Formularfeldern an ihren Container

Ein weiterer Anwendungsfall für calc() ist die Unterstützung, um sicherzustellen, dass Formularfelder in den verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszuragen, und dabei einen angemessenen Rand beibehalten.

Werfen wir einen Blick auf etwas CSS:

css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Hier wird das Formular so eingerichtet, dass es 1/6 der verfügbaren Fensterbreite nutzt. Dann wird erneut calc() verwendet, um sicherzustellen, dass Eingabefelder eine geeignete Größe behalten sollen, indem sie die Breite ihres Containers minus 1em betragen. Dann macht das folgende HTML Gebrauch von diesem CSS:

html
<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Verschachtelung mit CSS-Variablen

Sie können calc() mit CSS-Variablen verwenden. Betrachten Sie den folgenden Code:

css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Nachdem alle Variablen expandiert sind, wird der Wert von widthC calc(calc(100px / 2) / 2) sein. Wenn er der width-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc()-Funktionen (unabhängig davon, wie tief sie verschachtelt sind) einfach in Klammern abgeflacht. Daher wird der Wert der width-Eigenschaft letztendlich calc((100px / 2) / 2) sein, was 25px entspricht. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung von Klammern.

Anpassung von Farbkanälen in relativen Farben

Die calc()-Funktion kann verwendet werden, um einzelne Farbkanäle in relativen Farben anzupassen, ohne dass es nötig ist, Farbkanalwerte als Variablen zu speichern.

Im folgenden Beispiel verwendet der erste Absatz eine <named-color>. In den darauf folgenden Absätzen wird calc() mit den Funktionen rgb() und hsl() verwendet, um die Werte jedes Farbkanals relativ zur ursprünglichen benannten Farbe anzupassen.

html
<p class="original">Original text color in rebeccapurple</p>
<p class="increase-hue">Hue increased by 80</p>
<p class="increase-lightness">Lightness increased by 20</p>
<p class="decrease-lightness">Lightness decreased by 10</p>
css
.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

Für ein weiteres Beispiel der Verwendung der calc()-Funktion, um relative Farben abzuleiten, siehe den Abschnitt Verwendung von mathematischen Funktionen auf der Seite Verwendung relativer Farben.

Spezifikationen

Specification
CSS Values and Units Module Level 4
# calc-func

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
calc()
Color component support
Gradient color stops support
Nested calc() support
<number> value support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch