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 des Ausdrucks wird als Wert für eine CSS-Eigenschaft verwendet. In diesem Ausdruck können die Operanden mithilfe der 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 einem entsprechenden Einheitstring enden, wie px, em oder %. Sie können unterschiedliche Einheiten mit jedem Operanden in Ihrem Ausdruck verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnung festzulegen, wenn dies erforderlich ist.

Es gibt einige Punkte zu beachten bezüglich calc():

• Die Serialisierung der Argumente innerhalb von calc() folgt dem IEEE-754-Standard für Gleitkomma-Mathematik, was bedeutet, dass es einige Fälle zu beachten gibt hinsichtlich der Konstanten infinity und NaN. Weitere Einzelheiten dazu, wie Konstanten serialisiert werden, finden Sie auf der Seite calc-keyword.

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellen-Spaltengruppen, Tabellenzeilen, Tabellen-Zeilengruppen und Tabellenzellen in sowohl Auto- als auch Fest-Layout-Tabellen beinhalten, können so behandelt werden, als ob auto angegeben ist.

• Die calc() Funktion kann den numerischen Wert für Prozenttypen nicht direkt 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 wird calc(1.4) zu einem Wert von 1. Wenn der Dezimalteil des Wertes genau 0.5 ist, wird aufgerundet. Zum Beispiel wird calc(1.5) zu einem Wert von 2, während calc(-1.5) zu -1 gerundet wird.

• calc() kann keine Berechnungen auf inhärente Größenwerte wie auto und fit-content durchführen. Verwenden Sie stattdessen die calc-size() Funktion.

• Die Operatoren + und - müssen von Leerzeichen umgeben sein. Beispielsweise wird calc(50% -8px) als "ein Prozentsatz gefolgt von einer negativen Länge" analysiert — was ein ungültiger Ausdruck ist — während calc(50% - 8px) als "ein Prozentsatz gefolgt von einem Subtraktionsoperator und einer Länge" angesehen wird. Ebenso wird calc(8px + -50%) als "eine Länge gefolgt von einem Additionsoperator und einem negativen Prozentsatz" behandelt.
• Die Operatoren * und / erfordern keine Leerzeichen, aber es wird empfohlen, sie der Konsistenz halber hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Für Längen können Sie nicht 0 verwenden, um 0px (oder eine andere Längeinheit) auszudrücken; 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 erfordern, dass bei den Operatoren * und / einer der Operanden keine Einheit hat. Für / muss der rechte Operand keine Einheit haben. Zum Beispiel font-size: calc(1.25rem / 1.25) ist gültig, aber font-size: calc(1.25rem / 125%) ist 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 Anzahl 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 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, achten Sie darauf, 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 skaliert, wenn die Seite gezoomt wird.

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

calc() vereinfacht 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 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, sicherzustellen, dass Formularfelder in den verfügbaren Platz passen, ohne über den Rand ihres Containers hinauszureichen, während ein angemessener Rand beibehalten wird.

Sehen 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 eingerichtet, dass es 1/6 der verfügbaren Fensterbreite verwendet. Um sicherzustellen, dass die Eingabefelder eine angemessene Größe behalten, verwenden wir calc() erneut, um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Dann 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 {
  --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 dieser Wert der Breiten-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc() Funktionen (egal wie tief verschachtelt) auf einfache 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 ohne die Notwendigkeit, Farbkanalwerte als Variablen zu speichern, anzupassen.

Im folgenden Beispiel verwendet der erste Absatz eine <named-color>. In den nachfolgenden Absätzen wird calc() zusammen 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 der Verwendung der calc() Funktion zur Ableitung relativer Farben, siehe den Abschnitt Verwendung von mathematischen Funktionen auf der Seite Using relative colors.

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