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 einzigen Ausdruck als Parameter, und das Ergebnis des Ausdrucks wird als Wert einer CSS-Eigenschaft verwendet. In diesem Ausdruck können die Operanden mit den unten aufgeführten Operatoren kombiniert werden. Bei mehreren Operanden in einem Ausdruck wendet calc() die standardmäßigen Regeln zur Operator-Priorität an:

+

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 entsprechenden Einheit wie px, em oder % versehen sein. Sie können in Ihrem Ausdruck unterschiedliche Einheiten für jeden Operanden verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn dies erforderlich ist.

Es gibt einige Punkte, die Sie bei der Verwendung von calc() beachten sollten:

• Die Serialisierung der Argumente innerhalb von calc() folgt dem IEEE-754-Standard für Fließkommamathematik, was bedeutet, dass es einige Fälle bezüglich der Konstanten infinity und NaN zu beachten gibt. Weitere Informationen zur Serialisierung von Konstanten finden Sie auf der Seite calc-keyword.

• Mathematikausdrücke, die Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können so behandelt werden, als wäre auto angegeben.

• Die calc() Funktion kann nicht direkt den Zahlenwert von Prozentsatztypen ersetzen; zum Beispiel ist calc(100 / 4)% ungültig, während calc(100% / 4) gültig ist.

• Wenn calc() dort verwendet wird, wo ein <integer> erwartet wird, wird der Wert auf die nächste ganze Zahl gerundet. So resultiert calc(1.4) in einem Wert von 1. Wenn der Dezimalteil des Wertes genau 0.5 beträgt, wird der Wert nach oben gerundet. Zum Beispiel ergibt calc(1.5) einen Wert von 2, während calc(-1.5) auf -1 gerundet wird.

• 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 müssen von Leerzeichen umgeben sein. Zum Beispiel wird calc(50% -8px) als „ein Prozentsatz gefolgt von einer negativen Länge“ geparst — was ein ungültiger Ausdruck ist — während calc(50% - 8px) als „ein Prozentsatz gefolgt von einem Subtraktionsoperator und einer Länge“ behandelt wird. Ebenso wird calc(8px + -50%) als „eine Länge gefolgt von einem Additionsoperator und einem negativen Prozentsatz“ behandelt.
• Die * und / Operatoren erfordern keine Leerzeichen, aber es wird empfohlen, diese aus Konsistenzgründen zu verwenden.
• Es ist erlaubt, calc() Funktionen zu schachteln, wobei die inneren als einfache Klammern behandelt werden.
• Für Längen können Sie nicht 0 verwenden, um 0px (oder eine andere Längeneinheit) zu bedeuten; stattdessen müssen Sie die Version mit der Einheit verwenden: margin-top: calc(0px + 20px); ist gültig, während margin-top: calc(0 + 20px); ungültig ist.
• Aktuelle Implementierungen verlangen, dass bei den * und / Operatoren einer der Operanden keine Einheit hat. Bei / 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%) ungültig.

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 eine Reihe von Farbkanal-Schlüsselwörtern, von denen jedes den Wert des Farbkanals als <number> darstellt (siehe Kanalwerte lösen sich in <number> Werte auf für mehr Informationen). Die calc() Funktion kann diese Farbkanal-Schlüsselwörter verwenden, um dynamische Anpassungen der Farbkanäle 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, wenn die Seite gezoomt wird.

• MDN Verständnis von WCAG, Erklärung der Richtlinie 1.4
• 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, 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 Gewährleistung, dass Formularfelder in den verfügbaren Platz passen, ohne über den Rand ihres Containers hinauszuragen, 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 verwendet. Dann, um sicherzustellen, dass Eingabefelder eine angemessene Größe beibehalten, verwenden wir calc() erneut, um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Dann folgt der HTML-Code, der 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 folgenden Code:

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

Nachdem alle Variablen erweitert wurden, wird der Wert von widthC calc(calc(100px / 2) / 2) sein. Wenn es der Breiten-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc() Funktionen (egal wie tief geschachtelt) 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 Farbkanäle in relativen Farben anzupassen, ohne dass die Farbkanalwerte als Variablen gespeichert werden müssen.

Im Beispiel unten 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);
}

Ein weiteres Beispiel für die Verwendung der calc() Funktion zur Ableitung relativer Farben finden Sie im Abschnitt Using math functions auf der Seite Using relative colors.

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