calc()

Probieren Sie es aus

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

Syntax

/* 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 mit den unten aufgeführten Operatoren kombiniert werden. Wenn der Ausdruck mehrere Operanden enthält, verwendet calc() die Standard-Vorrangregeln für Operatoren:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

Dividiert den linksseitigen Operanden (Dividende) durch den rechtsseitigen Operanden (Divisor).

Alle Operanden, außer denen vom Typ <number>, müssen mit einer entsprechenden Einheit, wie px, em oder %, versehen sein. Es kann für jeden Operanden in Ihrem Ausdruck eine andere Einheit verwendet werden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn notwendig.

Beschreibung

Es gibt einige Punkte bezüglich calc(), die in den folgenden Abschnitten näher erläutert werden.

Ergebniswerte

Die calc() Funktion muss anstelle eines kompletten 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 errechnete 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 gleichwertig mit der Angabe margin: 3, was dazu führt, dass die Eigenschaft ignoriert wird.

Wenn ein <integer> erwartet wird, kann der calc() Ausdruck auch einen <number> ergeben, der auf die nächstgelegene ganze Zahl gerundet wird. Somit wird calc(1.4) zu einem Wert von 1. Wenn der Bruchteil genau 0.5 beträgt, wird der Wert zur positiven Unendlichkeit gerundet. Zum Beispiel resultiert calc(1.5) in einem Wert von 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Fließkomma-Arithmetik gemäß dem IEEE-754-Standard durch, was einige Überlegungen hinsichtlich der Werte infinity und NaN mit sich bringt. Für weitere Details zur Serialisierung von Konstanten siehe die Seite calc-keyword.

Überlegungen zu Eingaben

• calc() kann keine Berechnungen mit 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, Leerraum für Konsistenz hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen in Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können so behandelt werden, als ob auto angegeben wäre.
• Siehe <calc-sum> für weitere Informationen zur Syntax von + und - Ausdrücken.

CSS-typisierte Arithmetik

Bei der Verwendung von calc() zum Multiplizieren von Werten unter Verwendung des * Operators kann nur ein Wert eine Einheit beinhalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS bedeutungslos ist.

Im Gegensatz dazu ergibt 200px / 4px 50, was in CSS Sinn ergibt. Daher ermöglichen unterstützte Browser bei der Verwendung der calc() Funktion zum Dividieren von Zahlen unter Verwendung des / Operators Einheiten auf beiden Seiten des Operanden, sofern sie vom selben Datentyp sind. Zum Beispiel ist 100vw / 1px gültig und ergibt einen einheitenlosen Wert.

Der Quotient kann dann in den Werten von Eigenschaften oder Funktionen verwendet werden, die ein <number> als Wert oder Parameter akzeptieren, oder durch Multiplizieren mit einem typisierten Wert in einen anderen Datentyp umgewandelt werden.

Für eine vollständige Erklärung der typisierten Arithmetik in CSS sowie Beispiele siehe Using CSS typed arithmetic.

Unterstützung für die Berechnung von Farbkanälen in relativen Farben

Die calc() Funktion kann direkt zum Manipulieren von Farbkanälen im Kontext von relativen Farben verwendet werden. Dies ermöglicht dynamische Anpassungen der Farbkanäle in Farbmodellen wie rgb(), hsl() und lch().

Die Syntax für relative Farben definiert mehrere Farbkanal-Schlüsselwörter, von denen jedes den Wert des Farbkanals als <number> darstellt (siehe Channel values resolve to <number> values für mehr Informationen). Die calc() Funktion kann diese Farbkanal-Schlüsselwörter verwenden, um dynamische Anpassungen an den Farbkanälen vorzunehmen, zum Beispiel calc(r + 10).

Formaler Syntax

<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        

Barrierefreiheit

Wenn calc() zur Steuerung der Schriftgröß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 Schriftgröße skaliert wird, wenn die Seite gezoomt wird.

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

Beispiele

Positionierung eines Objekts auf dem Bildschirm mit einem Rand

calc() ermöglicht die Positionierung eines Objekts mit einem festgelegten Rand. In diesem Beispiel erstellt das CSS ein Banner, das sich über das 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>

Automatische Größenanpassung von Formularelementen zum Passendmachen in ihrem Container

Ein weiterer Anwendungsfall für calc() ist, um sicherzustellen, dass Formularelemente in den verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszuwachsen und gleichzeitig einen passenden Rand beizubehalten.

Betrachten wir folgendes CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Hierbei wird im Formular selbst festgelegt, dass es 1/6 der verfügbaren Fensterbreite nutzt. Dann, um sicherzustellen, dass die Eingabefelder eine angemessene Größe beibehalten, verwenden wir erneut calc(), um festzustellen, 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>

Verschachtelung mit CSS-Variablen

Sie können calc() mit CSS-Variablen verwenden. Betrachten Sie 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, wird der Wert von --width-c als calc(calc(100px / 2) / 2) dargestellt. Wenn es der Breiten-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc() Funktionen (unabhängig davon, wie tief verschachtelt) auf nur umschließende Klammern reduziert. Somit wird der Wert der width Eigenschaft letztendlich calc((100px / 2) / 2), was 25px ergibt. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung von Klammern.

Anpassen von Farbkanälen in relativen Farben

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 untenstehenden Beispiel wird in dem ersten Absatz eine <named-color> verwendet. 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 Mathematische Funktionen verwenden auf der Seite Verwendung relativer Farben.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <calc-sum>
• <calc-keyword>
• CSS-Funktionen
• A Complete Guide to calc() in CSS (CSS-Tricks)