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 Standardregeln zur Operatorpräzedenz:

+

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 diejenigen vom Typ <number>, müssen mit einem geeigneten Einheitenstring 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, wenn nötig.

Beschreibung

Es gibt einige Punkte, die über calc() zu beachten sind, die in den folgenden Abschnitten detailliert beschrieben werden.

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., 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 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 Ganzzahl gerundet wird. So wird calc(1.4) zu einem Wert von 1. Wenn der Bruchteil des Wertes genau 0.5 ist, wird der Wert Richtung positive Unendlichkeit gerundet. Zum Beispiel wird calc(1.5) zu einem 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 bezüglich der infinity und NaN Werte mit sich bringt. Für weitere Details, wie Konstanten serialisiert werden, siehe die <calc-keyword> Seite.

Eingabekonstellationen

• 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 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 Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layou-Tabellen beinhalten, können so behandelt werden, als wäre auto spezifiziert.
• Siehe <calc-sum> für weitere Informationen zur Syntax von + und - Ausdrücken.

CSS typisierte Arithmetik

Bei der Verwendung von calc(), um Werte zu multiplizieren, kann nur ein Wert eine Einheit enthalten. Berechnungen wie 200px * 4px werden nicht unterstützt, da 800px² im CSS keinen Sinn ergibt.

Umgekehrt löst 200px / 4px zu 50 auf, was im CSS Sinn ergibt. Daher erlauben unterstützende Browser bei der Verwendung der calc()-Funktion zur Division von Zahlen den / Operator mit Einheiten auf beiden Seiten des Operanden, sofern sie vom gleichen Datentyp sind. 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 einen <number> als Wert oder Parameter akzeptieren, oder durch Multiplikation mit einem typisierten Wert werden in einen anderen Datentyp konvertiert.

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

Unterstützung zum Berechnen 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 (siehe Die Kanalwerte lösen sich zu <number> Werten auf 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 enthält, zum Beispiel:

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

Dies gewährleistet, dass die Textgröße skaliert wird, wenn die Seite gezoomt wird.

• MDN Verständnis der WCAG, Leitlinien 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.4: Text vergrößern | WAI | W3C

Beispiele

Positionieren eines Objekts auf dem Bildschirm mit einem Abstand

calc() ermöglicht das Positionieren eines Objekts mit einem festgelegten Abstand. 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>

Automatisches Skalieren von Formularfeldern, um in ihr Container zu passen

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

Betrachten wir etwas 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 so festgelegt, dass es 1/6 der verfügbaren Fensterbreite nutzt. Um sicherzustellen, dass Eingabefelder eine geeignete Größe beibehalten, wird calc() verwendet, um festzulegen, dass sie die Breite ihres Containers minus 1em haben sollten. Dann verwendet 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 wurden, wird der Wert von --width-c calc(calc(100px / 2) / 2) sein. Wenn dieser der width-Eigenschaft von .foo zugewiesen wird, werden alle inneren calc()-Funktionen (egal wie tief verschachtelt) auf nur noch Klammern reduziert. 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 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 Speicherung von Farbkanalwerten als Variablen erforderlich ist.

Im folgenden Beispiel verwendet der erste Absatz eine <named-color>. In den nachfolgenden Absätzen wird calc() zusammen mit den rgb() und hsl() Funktionen 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, wie die calc()-Funktion zur Ableitung relativer Farben verwendet wird, 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
• Eine vollständige Anleitung zu calc() in CSS (CSS-Tricks)