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 Funktion calc() akzeptiert einen einzelnen Ausdruck als Parameter, und das Ergebnis des 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 Operator-Vorrangsregeln:

+

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, mit Ausnahme von denen des Typs <number>, müssen mit einem entsprechenden Einheit-Zeichen versehen sein, wie z.B. px, em oder %. Es ist möglich, bei jedem Operanden im Ausdruck eine andere Einheit zu verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen bei Bedarf festzulegen.

Es gibt einige Punkte zu beachten bei der Verwendung von calc(), die in den unten stehenden Abschnitten detailliert beschrieben sind.

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 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 kompatibel sein, in dem er verwendet wird. Zum Beispiel ist margin: calc(1px + 2px) gültig, aber margin: calc(1 + 2) ist es nicht: es ist gleichbedeutend mit der Angabe margin: 3, was dazu führt, dass die Eigenschaft ignoriert wird.

Wenn ein <integer> erwartet wird, kann der calc() Ausdruck auch in einen <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 zur positiven Unendlichkeit gerundet. Zum Beispiel ergibt calc(1.5) den Wert 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Berechnungen mit Gleitkommazahlen nach dem IEEE-754-Standard aus, was einige Überlegungen hinsichtlich der infinity und NaN Werte erfordert. Weitere Details zur Serialisierung von Konstanten finden Sie auf der calc-keyword Seite.

• calc() kann keine Berechnungen mit intrinsischen Größenwerten wie auto und fit-content durchführen. Verwenden Sie stattdessen die calc-size() Funktion.
• Die Operatoren * und / erfordern keinen Leerraum, aber es wird empfohlen, ihn der Konsistenz halber hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Aktuelle Implementierungen erfordern, dass bei Verwendung der Operatoren * und / einer der Operanden einheitenlos sein muss. Bei / 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%) ist ungültig.
• Mathematische Ausdrücke, die Prozentangaben für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellen-Zeilen, Tabellen-Zeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können so 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 Farbkanäle direkt im Kontext von relativen Farben zu manipulieren. 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).

<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 enthält, 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 von WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis von WCAG 2.0

calc() erleichtert die Positionierung eines Objekts mit einem festgelegten Rand. In diesem Beispiel erstellt das CSS ein Banner, das sich über das gesamte Fenster erstreckt, wobei zwischen beiden Seiten des Banners und den Rändern des Fensters ein Abstand von 40 Pixeln besteht:

.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 sicherzustellen, dass Formularfelder im verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszuragen, während ein entsprechender Rand beibehalten wird.

Sehen wir uns also etwas CSS an:

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 selbst so festgelegt, dass es 1/6 der verfügbaren Fensterbreite nutzt. Um sicherzustellen, dass die Eingabefelder eine entsprechende Größe beibehalten, verwenden wir erneut calc(), um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Anschließend verwendet das folgende HTML dieses CSS:

<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 {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

Nach der Expansion aller Variablen wird der Wert von --width-c calc(calc(100px / 2) / 2) sein. Wenn dies der width Eigenschaft von .foo zugewiesen wird, werden alle inneren calc() Funktionen (egal wie tief verschachtelt) einfach auf Klammern reduziert. Daher wird der Wert der width-Eigenschaft letztendlich calc((100px / 2) / 2) sein, was 25px ergibt. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung von Klammern.

Die calc() Funktion kann verwendet werden, um einzelne Farbkanäle in relativen Farben zu adjustieren, ohne dass Farbkanalwerte als Variablen gespeichert werden müssen.

Im untenstehenden Beispiel verwendet der erste Absatz eine <named-color>. In den folgenden Absätzen wird calc() mit den rgb() und hsl() Funktionen verwendet, um die Werte jedes Farbkanals 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 Ableitung relativer Farben siehe den Abschnitt Verwendung von mathematischen Funktionen auf der Seite Using relative colors.

• <calc-sum>
• <calc-keyword>
• CSS-Funktionen
• Ein vollständiger Leitfaden zu calc() in CSS (CSS-Tricks)