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 einzigen 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 aufgelisteten Operatoren kombiniert werden. Wenn der Ausdruck mehrere Operanden enthält, verwendet calc() die standardmäßigen Regeln der Operator-Präzedenz:

+

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 einer geeigneten Einheitenspezifikation wie px, em oder % ergänzt werden. Sie können im Ausdruck unterschiedliche Einheiten für jeden Operanden verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen.

Beschreibung

Es gibt ein paar Punkte zu beachten bei calc(), die in den folgenden Abschnitten detailliert beschrieben werden.

Ergebniswerte

Die calc()-Funktion muss an Stelle eines vollständigen 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 etc. ersetzen, ohne auch die nachfolgende Einheit 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, das auf die nächste ganze Zahl gerundet wird. Also wird calc(1.4) zu einem Wert von 1 führen. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert gegen Unendlich gerundet. Zum Beispiel wird calc(1.5) einen Wert von 2 ergeben, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkommaberechnungen nach dem IEEE-754-Standard durch, was einige Überlegungen bezüglich infinity und NaN-Werten zur Folge hat. Für weitere Details darüber, wie Konstanten serialisiert werden, 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 keinen Leerraum, aber es wird empfohlen, ihn zur Konsistenz hinzuzufügen.
• Es ist erlaubt, calc()-Funktionen zu verschachteln, in diesem Fall werden die inneren als einfache Klammern behandelt.
• Mathematik-Ausdrücke, die Prozentsätze für Breiten und Höhen in Tabellenspalten, -spaltengruppen, -zeilen, -zeilengruppen und -zellen in sowohl automatischen als auch festgesetzten Layouttabellen enthalten, können so behandelt werden, als ob auto angegeben ist.
• Siehe <calc-sum> für weitere Informationen zur Syntax von + und - Ausdrücken.

CSS-getypte Arithmetik

Wenn Sie calc() zum Multiplizieren von Werten verwenden, wobei der *-Operator benutzt wird, darf nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS keinen Sinn ergibt.

In umgekehrter Weise löst 200px / 4px sich zu 50 auf, was in CSS Sinn macht. Daher erlauben unterstützende Browser, wenn die calc()-Funktion zum Dividieren von Zahlen mit dem /-Operator verwendet wird, Einheiten auf beiden Seiten des Operanden, vorausgesetzt, sie sind vom gleichen Datentyp. Zum Beispiel ist 100vw / 1px gültig und führt zu einem einheitslosen Wert.

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

Für eine vollständige Erklärung der getypten Arithmetik in CSS, zusammen mit Beispielen, siehe Using CSS typed arithmetic.

Unterstützung für das Berechnen von Farbkanälen in relativen Farben

Die calc()-Funktion kann innerhalb des Kontexts von relativen Farben direkt zur Manipulation von Farbkanälen verwendet werden. Dadurch können Farbkanäle in Farbmodellen wie rgb(), hsl() und lch() dynamisch angepasst werden.

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 weitere Informationen). 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() verwendet wird, um die Textgröße zu steuern, stellen Sie sicher, dass einer der Werte eine relative Längeneinheit einschließt, zum Beispiel:

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

Dies stellt sicher, dass die Textgröße bei Zoom des Seiteninhalts skaliert wird.

• MDN Understanding WCAG, Erläuterungen zu Richtlinie 1.4
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Beispiele

Platzierung 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 Fensterkanten:

.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ößeneinstellung von Formularfeldern zur Anpassung an ihren Container

Ein weiterer Anwendungsfall für calc() ist, sicherzustellen, dass Formularfelder in den verfügbaren Platz passen, ohne über den Rand ihres Containers hinauszuragen, während sie einen angemessenen Rand beibehalten.

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 festgelegt, dass es ein Sechstel der verfügbaren Fensterbreite ausnutzt. Dann verwenden wir calc() erneut, um festzulegen, dass die Eingabefelder die Breite ihres Containers minus 1em beibehalten sollen. 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>

Verschachtelung mit CSS-Variablen

Sie können calc() zusammen 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 aufgelöst sind, hat --width-c den Wert calc(calc(100px / 2) / 2). Wenn es der width-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc()-Funktionen (egal wie tief verschachtelt) zu einfachen Klammern vereinfacht. Daher wird der Wert der width-Eigenschaft letztendlich calc((100px / 2) / 2), was 25px entspricht. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung 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 Notwendigkeit, Farbkanalwerte als Variablen zu speichern.

Im untenstehenden Beispiel verwendet der erste Absatz eine <named-color>. In den nachfolgenden Absätzen wird calc() zusammen mit den Funktionen rgb() und hsl() genutzt, um die Werte jedes Farbkanals relativ zur ursprünglichen benannten Farbe zu justieren.

<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 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)