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 auf, 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. Enthält der Ausdruck mehrere Operanden, verwendet calc() die Standard-Operatorvorrangregeln:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

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

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

Beschreibung

Es gibt einige Punkte zu beachten bei calc(), die in den folgenden Abschnitten detailliert 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 der Prozentwerte, Längenwerte 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 kompatibel sein, in dem er verwendet wird. Zum Beispiel ist margin: calc(1px + 2px) gültig, aber margin: calc(1 + 2) nicht: Es ist gleichbedeutend mit der Angabe 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, welcher auf die nächste ganze Zahl gerundet wird. So ergibt calc(1.4) einen Wert von 1. Wenn der gebrochene Teil des Wertes genau 0.5 beträgt, wird der Wert aufgerundet zur positiven Unendlichkeit. Zum Beispiel ergibt calc(1.5) einen Wert von 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkommaberechnungen nach dem IEEE-754-Standard durch, was einige Überlegungen hinsichtlich der infinity und NaN Werte mit sich bringt. Für weitere Details darüber, wie Konstanten serialisiert werden, siehe die Seite calc-keyword.

Eingabebedingungen

• 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, jedoch wird empfohlen, diesen zur Konsistenz hinzuzufügen.
• Es ist erlaubt, calc()-Funktionen zu schachteln, wobei die inneren wie einfache Klammern behandelt werden.
• Mathematische Ausdrü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 Layouteinstellungen betreffen, können so behandelt werden, als wäre auto angegeben.
• Weitere Informationen zur Syntax der +- und --Ausdrücke finden Sie unter <calc-sum>.

Typisierte Arithmetik in CSS

Bei der Verwendung von calc() zur Multiplikation von Werten mit dem *-Operator, darf nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS bedeutungslos ist.

Umgekehrt ergibt 200px / 4px den Wert 50, was in CSS Sinn macht. Wenn die calc()-Funktion zum Teilen von Zahlen mit dem /-Operator verwendet wird, ermöglichen unterstützende Browser siehe Browser-Kompatibilität Einheiten auf beiden Seiten des Operanden, vorausgesetzt, sie sind vom gleichen Datentyp. Zum Beispiel ist 100vw / 1px gültig und ergibt einen einheitslosen 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 Using CSS typed arithmetic.

Unterstützung für die 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, die jeweils den Wert des Farbkanals als <number> darstellen (siehe Channel values resolve to <number> values 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).

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 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 Understanding WCAG, Guideline 1.4 - Erläuterungen
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Beispiele

Positionierung eines Objekts auf dem Bildschirm mit einem Abstand

calc() macht es einfach, ein Objekt mit einem festen Abstand zu positionieren. In diesem Beispiel erstellt das CSS ein Banner, das sich über das 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>

Automatische Größenanpassung von Formularfeldern, um in ihren Container zu passen

Ein weiterer Anwendungsfall für calc() ist die Unterstützung, um sicherzustellen, dass Formularfelder in den verfügbaren Raum passen, ohne über den Rand ihres Containers herauszuragen, während ein angemessener Abstand 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 selbst so eingerichtet, dass es 1/6 der verfügbaren Fensterbreite verwendet. Um sicherzustellen, dass Eingabefelder eine angemessene Größe beibehalten, verwenden wir erneut calc(), um festzulegen, dass sie die Breite ihres Containers minus 1em sein sollten. Anschließend wird im folgenden HTML dieses CSS verwendet:

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

Schachtelung 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 auf calc(calc(100px / 2) / 2) gesetzt. Wenn es der width-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc()-Funktionen (egal wie tief geschachtelt) zu einfachen Klammern zusammengefasst. Daher wird der Wert der width-Eigenschaft letztendlich calc((100px / 2) / 2) sein, was 25px ergibt. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit dem Verwenden von Klammern.

Anpassung von Farbkanälen in relativen Farben

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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