CSS-Funktion 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 Funktion calc() akzeptiert 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 zur Operatorpriorität:

+

Addiert die angegebenen Operanden.

-

Subtrahiert den zweiten Operanden vom ersten Operanden.

*

Multipliziert die angegebenen Operanden.

/

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

Alle Operanden, mit Ausnahme derer vom Typ <number>, müssen mit einer geeigneten Einheit wie px, em oder % versehen sein. Sie können für jeden Operanden in Ihrem Ausdruck eine andere Einheit verwenden. Bei Bedarf können Sie außerdem Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen.

Beschreibung

Bei calc() gibt es einige Punkte zu beachten, die in den folgenden Abschnitten näher erläutert werden.

Ergebniswerte

Die Funktion calc() 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 dahinterstehende Einheit zu ersetzen. Beispielsweise ist calc(100 / 4)% ungültig, während calc(100% / 4) gültig ist.

Der Ergebniswert von calc() muss mit dem Kontext kompatibel sein, in dem er verwendet wird. Beispielsweise ist margin: calc(1px + 2px) gültig, aber margin: calc(1 + 2) nicht: Dies 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, das auf die nächste ganze Zahl gerundet wird. Daher ergibt calc(1.4) den Wert 1. Wenn der Nachkommateil des Werts genau 0.5 beträgt, wird der Wert in Richtung positive Unendlichkeit gerundet. Beispielsweise ergibt calc(1.5) den Wert 2, während calc(-1.5) auf -1 gerundet wird.

calc() führt Gleitkomma-Arithmetik gemäß dem IEEE-754-Standard durch, was einige Überlegungen bezüglich der Werte infinity und NaN mit sich bringt. Weitere Details zur Serialisierung von Konstanten finden Sie auf der Seite <calc-keyword>.

Hinweise zur Eingabe

• calc() kann keine Berechnungen mit intrinsischen Größenwerten wie auto und fit-content durchführen. Verwenden Sie stattdessen die Funktion calc-size().
• Die Operatoren * und / erfordern keine Leerzeichen, deren Verwendung wird jedoch aus Gründen der Konsistenz empfohlen.
• Es ist zulässig, calc()-Funktionen zu verschachteln; in diesem Fall werden die inneren Funktionen als einfache Klammern behandelt.
• Mathematische Ausdrücke mit Prozentangaben für Breiten und Höhen bei Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in Tabellen mit sowohl automatischem als auch festem Layout können so behandelt werden, als wäre auto angegeben.
• Weitere Informationen zur Syntax von +- und --Ausdrücken finden Sie unter <calc-sum>.

Typisierte CSS-Arithmetik

Wenn calc() zum Multiplizieren von Werten mit dem Operator * verwendet wird, darf nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² in CSS keine Bedeutung hat.

Umgekehrt wird 200px / 4px zu 50 aufgelöst, was in CSS sinnvoll ist. Wenn Sie daher die Funktion calc() verwenden, um Zahlen mit dem Operator / zu dividieren, erlauben unterstützende Browser Einheiten auf beiden Seiten des Operanden, sofern sie denselben Datentyp haben. Beispielsweise 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 Multiplikation mit einem typisierten Wert in einen anderen Datentyp umgewandelt werden.

Eine vollständige Erklärung der typisierten Arithmetik in CSS einschließlich Beispielen finden Sie unter Verwendung typisierter CSS-Arithmetik.

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

Die Funktion calc() 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 Syntax für relative Farben definiert mehrere Farbkanal-Schlüsselwörter, von denen jedes den Wert des Farbkanals als <number> darstellt (weitere Informationen finden Sie unter Kanalwerte werden zu <number>-Werten aufgelöst). Die Funktion calc() kann diese Farbkanal-Schlüsselwörter verwenden, um dynamische Anpassungen an den Farbkanälen vorzunehmen, beispielsweise 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 skaliert wird, wenn die Seite gezoomt wird.

• MDN: WCAG verstehen, Erläuterungen zu Richtlinie 1.4
• Erfolgskriterium 1.4.4 verstehen: Textgröße ändern | WAI | W3C

Beispiele

Positionieren eines Objekts auf dem Bildschirm mit einem Rand

calc() ermöglicht es, ein Objekt mit einem festgelegten Rand zu positionieren. 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 Formularfeldern an ihren Container

Ein weiterer Anwendungsfall für calc() besteht darin, sicherzustellen, dass Formularfelder in den verfügbaren Platz passen, ohne über den Rand ihres Containers hinauszuragen, und dabei einen angemessenen Rand beibehalten.

Sehen 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 für das Formular selbst festgelegt, dass es 1/6 der verfügbaren Fensterbreite verwendet. Um dann sicherzustellen, dass Eingabefelder eine angemessene Größe behalten, verwenden wir erneut calc(), um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollen. Das folgende HTML verwendet anschließend 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 wurden, lautet der Wert von --width-c calc(calc(100px / 2) / 2). 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 lautet der Wert der width-Eigenschaft letztlich calc((100px / 2) / 2), was 25px entspricht. Kurz gesagt, ein calc() innerhalb eines calc() ist identisch mit der Verwendung von Klammern.

Anpassen von Farbkanälen in relativen Farben

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

Im folgenden 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);
}

Ein weiteres Beispiel für die Verwendung der Funktion calc(), um relative Farben abzuleiten, finden Sie im Abschnitt Verwendung mathematischer 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)