calc() CSS-Funktion

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-Operatorpräzedenzregeln:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

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

Alle Operanden, außer denen vom Typ <number>, müssen mit einem entsprechenden Einheitensuffix wie px, em oder % versehen sein. Sie können in Ihrem Ausdruck bei jedem Operanden unterschiedliche Einheiten verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnung festzulegen, wenn nötig.

Beschreibung

Es gibt einige Punkte, die Sie über calc() beachten sollten, die in den unten stehenden Abschnitten näher erläutert werden.

Ergebnende 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 usw. ersetzen, ohne auch die nachfolgende Einheit zu ersetzen. Beispielsweise 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. Beispielsweise ist margin: calc(1px + 2px) gültig, jedoch margin: calc(1 + 2) nicht: Dies entspricht der Angabe von 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, der auf die nächste ganze Zahl gerundet wird. Somit wird calc(1.4) einen Wert von 1 ergeben. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert zur positiven Unendlichkeit gerundet. Beispielsweise wird calc(1.5) zu einem Wert von 2 führen, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkommamathematik gemäß dem IEEE-754-Standard aus, was einige Überlegungen zu den Werten infinity und NaN mit sich bringt. Für weitere Einzelheiten zur Serialisierung von Konstanten siehe die Seite <calc-keyword>.

Eingabebedingungen

• calc() kann keine Berechnungen bei intrinsischen Größenwerten wie auto und fit-content durchführen. Verwenden Sie stattdessen die Funktion calc-size().
• Die Operatoren * und / erfordern keine Leerzeichen, aber es wird empfohlen, sie zur Konsistenz hinzuzufügen.
• Es ist erlaubt, calc()-Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden.
• Mathematische Ausdrücke, die Prozentangaben für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellen-Zeilen, Tabellen-Zeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen enthalten, können so behandelt werden, als ob auto angegeben wäre.
• Weitere Informationen zur Syntax von + und - Ausdrücken finden Sie unter <calc-sum>.

CSS-typisierte Arithmetik

Wenn Sie calc() verwenden, um Werte mit dem *-Operator zu multiplizieren, darf nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS keinen Sinn ergibt.

Umgekehrt löst sich 200px / 4px zu 50 auf, was in CSS sinnvoll ist. Daher erlauben unterstützende Browser, wenn Sie die calc()-Funktion verwenden, um Zahlen mit dem /-Operator zu dividieren, Einheiten auf beiden Seiten des Operanden, vorausgesetzt, sie sind vom gleichen Datentyp. Beispielsweise ist 100vw / 1px gültig und ergibt einen einheitenlosen Wert.

Der Quotient kann dann in Wertangaben von Eigenschaften oder Funktionen verwendet werden, die ein <number> als Wert oder Parameter akzeptieren, oder in einen anderen Datentyp umgewandelt werden, indem er mit einem typisierten Wert multipliziert wird.

Für eine vollständige Erklärung der typisierten Arithmetik in CSS, einschließlich Beispielen, siehe Verwendung von CSS-typisierter Arithmetik.

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 der Farbkanäle 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 (weitere Informationen siehe Channel values resolve to <number> values). Die calc()-Funktion kann diese Farbkanal-Schlüsselwörter verwenden, um dynamische Anpassungen an den Farbkanälen vorzunehmen, z. B. 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, sollten Sie sicherstellen, dass einer der Werte eine relative Längeneinheit umfasst, zum Beispiel:

h1 {
  font-size: calc(1.5rem + 3vw);
}

Dies stellt sicher, dass die Textgröße beim Zoomen der Seite skaliert wird.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4: Resize Text | WAI | W3C

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 und auf beiden Seiten einen Abstand von 40 Pixeln zwischen dem Banner und den Fensterrändern hat:

.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 Sicherstellung, dass Formularfelder in den verfügbaren Raum passen, ohne über den Rand ihres Containers hinauszugehen, und dabei einen angemessenen Rand beibehalten.

Schauen wir uns einige CSS-Einstellungen 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 auf 1/6 der verfügbaren Fensterbreite festgelegt. Um sicherzustellen, dass Eingabefelder eine angemessene Größe beibehalten, verwenden wir calc() erneut, um festzulegen, dass sie die Breite ihres Containers abzüglich 1em haben sollen. 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 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 sind, wird der Wert von --width-c calc(calc(100px / 2) / 2) sein. Wenn er der Breiten-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc()-Funktionen (unabhängig davon, wie tief verschachtelt sie sind) zu einfachen Klammern abgeflacht. Daher wird der Wert der width-Eigenschaft schließlich calc((100px / 2) / 2) sein, was 25px entspricht. Kurz gesagt: Ein calc() in einem calc() ist identisch mit der Verwendung von Klammern.

Anpassung von Farbkanälen in relativen Farben

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

Im unteren 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, um relative Farben abzuleiten, siehe den Abschnitt Using math functions auf der Seite Using relative colors.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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