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 an, 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 Operatorprioritätsregeln:

+

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 solchen des Typs <number>, müssen mit einer geeigneten Einheitenzeichenkette wie px, em oder % versehen werden. Sie können für jeden Operanden in Ihrem Ausdruck eine andere Einheit verwenden. Sie können auch Klammern 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 beschrieben 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 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) nicht: Es ist äquivalent zur 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 Ganzzahl gerundet wird. Also wird calc(1.4) zu einem Wert von 1. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert aufgerundet. Zum Beispiel wird calc(1.5) zu einem Wert von 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkommaberechnungen entsprechend dem IEEE-754 Standard durch, was zu einigen Überlegungen hinsichtlich der unendlich und NaN Werte führt. Für weitere Details, wie Konstanten serialisiert werden, siehe die Seite calc-keyword.

• calc() kann keine Berechnungen auf intrinsischen Größenwerten wie auto und fit-content durchführen. Verwenden Sie stattdessen die calc-size() Funktion.
• Die * und / Operatoren erfordern keinen Leerraum, aber es wird empfohlen, diesen zur Konsistenz hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Die aktuellen Implementierungen erfordern, dass bei Verwendung der * und / Operatoren einer der Operanden keine Einheit hat. Für / muss der rechte Operand keine Einheit haben. 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 Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenreihen, Tabellenreihen-Gruppen und Tabellenspalten sowohl in Auto- als auch Festlayout-Tabellen enthalten, 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 von Farbkanälen in Farbmodellen wie rgb(), hsl(), und lch().

Die relative Farbsyntax definiert mehrere Farbkanal-Schlüsselwörter, die jeweils den Wert des Farbkanals als <number> darstellen (siehe Kanalwerte lösen sich zu <number> Werten 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 die Textgröße skaliert wird, wenn die Seite gezoomt wird.

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

calc() macht es einfach, ein Objekt mit einem festgelegten Rand zu positionieren. In diesem Beispiel erstellt das CSS ein Banner, das über das Fenster gestreckt wird, mit einem 40-Pixel-Abstand 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 es, sicherzustellen, dass Formularfelder in den verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszugehen, während ein angemessener Rand beibehalten wird.

Schauen wir uns 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 so festgelegt, dass es 1/6 der verfügbaren Fensterbreite nutzt. Dann wird, um sicherzustellen, dass Eingabefelder eine angemessene Größe behalten, calc() erneut verwendet, um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Das folgende HTML nutzt 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);
}

Nachdem alle Variablen erweitert wurden, hat der Wert von --width-c die Form calc(calc(100px / 2) / 2). 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), 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 anzupassen, ohne dass die Farbkanalwerte als Variablen gespeichert werden müssen.

Im folgenden Beispiel verwendet der erste Absatz einen <named-color>. In den folgenden Absätzen wird calc() mit den Funktionen rgb() und hsl() 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 Mathematische Funktionen verwenden auf der Seite Using relative colors.

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