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 entgegen, 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 Standardregeln für Operatorenrangfolge:

+

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 solche vom Typ <number>, müssen mit einer passenden Einheitszeichenfolge, wie px, em oder %, versehen werden. Sie können in Ihrem Ausdruck mit jedem Operanden eine andere Einheit verwenden. Sie können auch Klammern benutzen, um die Rechenreihenfolge 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-Werts von einem 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 dahinter 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 entspricht 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, das auf die nächste ganze Zahl gerundet wird. So wird calc(1.4) zu einem Wert von 1. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert ins Positive aufgerundet. Zum Beispiel wird calc(1.5) zu einem Wert von 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkomma-Berechnungen nach dem IEEE-754-Standard durch, was einige Überlegungen zu infinity und NaN-Werten mit sich bringt. Für weitere Details zur Serialisierung von Konstanten 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 keine Leerzeichen, aber es wird empfohlen, sie der Konsistenz wegen 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 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%) ist ungültig.
• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen auf Tabellenspalten, Tabellenkolonnengruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen sowohl in automatisches als auch festes Layouttabellen einbeziehen, können behandelt werden, als ob auto angegeben ist.
• 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 Schlüsselwörter für Farbkanäle, von denen jedes den Wert des Farbkanals als <number> darstellt (siehe Channel values resolve to <number> values für weitere Informationen). Die calc() Funktion kann diese Schlüsselwörter der Farbkanäle 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 beinhaltet, zum Beispiel:

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

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

• MDN Verständnis der WCAG, Richtlinie 1.4 Erklärungen
• Verstehen des Erfolgs-Kriteriums 1.4.4 | W3C Verständnis von WCAG 2.0

calc() macht es einfach, ein Objekt mit einem festgelegten Rand zu positionieren. In diesem Beispiel erstellt das CSS ein Banner, das sich über das gesamte Fenster erstreckt, mit einem Abstand von 40 Pixeln zwischen den 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 Platz passen, ohne über den Rand ihres Containers hinauszugehen, während ein passender 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;
}

Hierbei wird das Formular selbst so eingerichtet, dass es ein Sechstel der verfügbaren Fensterbreite verwendet. Dann, um sicherzustellen, dass Eingabefelder eine geeignete Größe beibehalten, verwenden wir erneut calc(), um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollten. Dann nutzt 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 {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Nachdem alle Variablen expandiert wurden, wird der Wert von widthC calc(calc(100px / 2) / 2) betragen. Wenn dieser der width-Eigenschaft von .foo zugeordnet wird, werden alle inneren calc() Funktionen (ganz gleich, wie tief verschachtelt) zu einfachen Klammern zusammengefasst. Daher wird der Wert der width-Eigenschaft schließlich 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 anzupassen, ohne die Farbkanalwerte als Variablen speichern zu müssen.

Im folgenden Beispiel verwendet der erste Absatz einen <named-color>. In den darauf 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 Using math functions auf der Seite Using relative colors.

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