calc()

/* 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 einzelnen Ausdruck als Parameter, und das Ergebnis dieses Ausdrucks wird als Wert für eine CSS-Eigenschaft verwendet. In diesem Ausdruck können die Operanden mit den unten aufgeführten Operatoren kombiniert werden. Wenn der Ausdruck mehrere Operanden enthält, verwendet calc() die standardmäßigen Operatorvorrangregeln:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

Teilt den linken Operanden (Dividend) durch den rechten Operanden (Divisor).

Alle Operanden, außer denen vom Typ <number>, müssen mit einer geeigneten Einheit versehen werden, wie px, em oder %. Sie können für jeden Operanden in Ihrem Ausdruck unterschiedliche Einheiten verwenden. Es ist auch möglich, Klammern zu verwenden, um die Reihenfolge der Berechnung festzulegen, wenn dies erforderlich ist.

Es gibt einige Punkte zu beachten bei calc(), die in den folgenden Abschnitten detailliert behandelt werden.

Die calc() Funktion muss anstelle eines vollständigen CSS-Wertes eines der folgenden Typen stehen:

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• Einer der gemischten Typen wie <length-percentage>

calc() kann nicht nur den nummerischen Teil von Prozentwerten, Längenwerten etc. 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 kompatibel sein, in dem er verwendet wird. Zum Beispiel ist margin: calc(1px + 2px) 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, der auf die nächste ganze Zahl gerundet wird. So ergibt calc(1.4) den Wert 1. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert aufgerundet. Zum Beispiel ergibt calc(1.5) den Wert 2, während calc(-1.5) zu -1 gerundet wird.

calc() führt Gleitkomma-Mathematik nach dem IEEE-754-Standard aus, was einige Überlegungen zu den Werten infinity und NaN beinhaltet. Für weitere Details zur Serialisierung von Konstanten siehe die calc-keyword Seite.

• calc() kann keine Berechnungen auf intrinsische Größenwerte wie auto und fit-content durchführen. Verwenden Sie stattdessen die calc-size() Funktion.
• Die * und / Operatoren erfordern keinen Leerraum, aber es wird empfohlen, ihn zur Konsistenz hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Aktuelle Implementierungen erfordern, dass bei der Verwendung der * und / Operatoren einer der Operanden ohne Einheit sein muss. Für / muss der rechte Operand ohne Einheit sein. Zum Beispiel ist font-size: calc(1.25rem / 1.25) gültig, aber font-size: calc(1.25rem / 125%) nicht.
• Mathematische Ausdrücke, die Prozentzahlen für Breiten und Höhen in Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können behandelt werden, als wäre auto angegeben.
• Siehe <calc-sum> für weitere Informationen zur Syntax von + und - Ausdrücken.

Die calc() Funktion kann verwendet werden, um Farbelemente direkt im Kontext von relativen Farben zu manipulieren. Dies ermöglicht dynamische Anpassungen der Farbelemente in Farbmodellen wie rgb(), hsl() und lch().

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

<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        

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

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

Dies stellt sicher, dass sich die Textgröße anpasst, wenn die Seite gezoomt wird.

• MDN Verständnis WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis WCAG 2.0

calc() macht es einfach, ein Objekt mit einem festgelegten Abstand zu positionieren. In diesem Beispiel erstreckt sich das CSS-Banner über das gesamte Fenster, mit einem Abstand von 40 Pixeln zwischen beiden Seiten des Banners und den Rändern des Fensters:

.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;
}

<div class="banner">This is a banner!</div>

Ein weiterer Anwendungsfall für calc() ist die Sicherstellung, dass Formularfelder in den verfügbaren Platz passen, ohne über die Kante ihres Containers hinauszuragen und dabei einen geeigneten Abstand beizubehalten.

Betrachten wir etwas 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 festgelegt, dass es 1/6 der verfügbaren Fensterbreite nutzt. Um sicherzustellen, dass die Eingabefelder eine geeignete Größe behalten, verwenden wir erneut calc(), um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Dann wird das folgende HTML für dieses CSS verwendet:

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

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

.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 (egal wie tief verschachtelt) zu einfachen Klammern reduziert. Daher wird der Wert der width Eigenschaft schließlich calc((100px / 2) / 2) sein, was 25px entspricht. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung von Klammern.

Die calc() Funktion kann verwendet werden, um einzelne Farbelemente in relativen Farben anzupassen, ohne die Farbelementwerte als Variablen speichern zu müssen.

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

<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>

p {
  font-family: monospace;
  font-size: 16px;
}

.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 zur Verwendung der calc() Funktion zur Ermittlung relativer Farben siehe den Abschnitt Verwenden von mathematischen Funktionen auf der Seite Verwenden relativer Farben.

• <calc-sum>
• <calc-keyword>
• CSS-Funktionen
• A Complete Guide to calc() in CSS (CSS-Tricks)