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 standardmäßigen Regeln der Operatorrangfolge:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

Dividiert den linken Operanden (Dividende) durch den rechten Operanden (Divisor).

Alle Operanden, außer denen vom Typ <number>, müssen mit einem geeigneten Einheitensuffix 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 Berechnungen festzulegen.

Beschreibung

Es gibt einige Punkte zu beachten bei calc(), die in den unten stehenden Abschnitten detailliert beschrieben sind.

Resultierende Werte

Die calc() Funktion muss anstelle eines vollständigen CSS-Werts 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 etc. 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, in dem er verwendet wird, kompatibel sein. Zum Beispiel ist margin: calc(1px + 2px) gültig, aber margin: calc(1 + 2) nicht: es entspricht der Angabe von margin: 3, wodurch die Eigenschaft ignoriert wird.

Wenn ein <integer> erwartet wird, kann der calc() Ausdruck auch zu einem <number> ausgewertet werden, der auf die nächste ganze Zahl gerundet wird. So ergibt calc(1.4) einen Wert von 1. Wenn der Dezimalteil des Werts genau 0.5 ist, 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-Berechnungen gemäß dem IEEE-754-Standard durch, was einige Überlegungen hinsichtlich der infinity und NaN Werte mit sich bringt. Für mehr Details, wie Konstanten serialisiert werden, schauen Sie auf der Seite calc-keyword nach.

Eingabeüberlegungen

• 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 benötigen keine Leerzeichen, aber es wird empfohlen, sie aus Konsistenzgründen hinzuzufügen.
• Es ist erlaubt, calc() Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Mathematische Ausdrücke mit Prozentwerten für Breiten und Höhen in Tabellenspalten, Tabellen-Spaltengruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen in sowohl Auto- als auch Festlayouttabellen 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 mit dem * Operator kann nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS keinen Sinn ergibt.

Im Gegensatz dazu ergibt 200px / 4px 50, was in CSS sinnvoll ist. Daher erlaubt die Verwendung der calc() Funktion zum Dividieren von Zahlen mit dem / Operator es in unterstützenden Browsern, Einheiten auf beiden Seiten des Operanden zu haben, vorausgesetzt, sie haben denselben Datentyp. Zum Beispiel ist 100vw / 1px gültig und ergibt einen wertlosen Wert.

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

Für eine vollständige Erklärung der typisierten Arithmetik in CSS mit Beispielen siehe Verwendung der CSS typisierten Arithmetik.

Unterstützung zur Berechnung von Farbkanälen in relativen Farben

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, von denen jedes den Wert des Farbkanals als <number> darstellt (sehen Sie Kanalwerte lösen sich zu <number> Werten auf 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).

Formale 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 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 skalierbar ist, wenn die Seite gezoomt wird.

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

Beispiele

Positionierung eines Objekts auf dem Bildschirm mit einem Rand

calc() erleichtert es, 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 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>

Automatisches Anpassen der Größe von Formularfeldern an ihren Container

Ein weiterer Anwendungsfall für calc() ist, um sicherzustellen, dass Formularfelder in den verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszuragen, und dabei einen geeigneten Rand beizubehalten.

Betrachten wir einige CSS:

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 selbst festgelegt, um 1/6 der verfügbaren Fensterbreite zu verwenden. Dann nutzen wir calc() erneut, um sicherzustellen, dass Eingabefelder eine geeignete Größe behalten, indem wir festlegen, dass sie die Breite ihres Containers minus 1em haben sollten. Dann wird das folgende HTML für dieses CSS verwendet:

<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Verschachteln mit CSS-Variablen

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, wird der Wert von --width-c calc(calc(100px / 2) / 2) sein. Wenn er der width Eigenschaft von .foo zugewiesen wird, werden alle inneren calc() Funktionen (unabhängig davon, wie tief sie verschachtelt sind) zu einfachen Klammern reduziert. 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.

Anpassen von Farbkanälen in relativen Farben

Die calc() Funktion kann verwendet werden, um einzelne Farbkanäle in relativen Farben anzupassen, ohne dass die Werte der Farbkanäle als Variablen gespeichert werden müssen.

Im folgenden Beispiel verwendet der erste Absatz eine <named-color>. In den folgenden Absätzen wird calc() mit den rgb() und hsl() Funktionen verwendet, um die Werte der einzelnen Farbkanäle 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 Verwendung relativer Farben.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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