calc()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die calc()
CSS Funktion ermöglicht Berechnungen bei der Angabe von CSS-Werten. Sie kann mit <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, <integer>
und <color-function>
Werten verwendet werden.
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 #000;
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 dieses 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 Operatorvorrangregeln:
+
-
Addiert die angegebenen Operanden.
-
-
Subtrahiert den zweiten Operanden vom ersten Operanden.
*
-
Multipliziert die angegebenen Operanden.
/
-
Teilt den linken Operanden (Dividend) durch den rechten Operanden (Divisor).
Alle Operanden, außer denen vom Typ <number>
, müssen mit einer geeigneten Einheit versehen werden, wie px
, em
oder %
. Sie können für jeden Operanden in Ihrem Ausdruck unterschiedliche Einheiten verwenden. Es ist auch möglich, Klammern zu verwenden, um die Reihenfolge der Berechnung festzulegen, wenn dies erforderlich ist.
Beschreibung
Es gibt einige Punkte zu beachten bei calc()
, die in den folgenden Abschnitten detailliert behandelt werden.
Ergebniswerte
Die calc()
Funktion muss anstelle 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 nummerischen Teil von Prozentwerten, Längenwerten 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 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. So ergibt calc(1.4)
den Wert 1
. Wenn der Bruchteil des Wertes genau 0.5
ist, wird der Wert aufgerundet. Zum Beispiel ergibt calc(1.5)
den Wert 2
, während calc(-1.5)
zu -1
gerundet wird.
calc()
führt Gleitkomma-Mathematik nach dem IEEE-754-Standard aus, was einige Überlegungen zu den Werten infinity
und NaN
beinhaltet. Für weitere Details zur Serialisierung von Konstanten siehe die calc-keyword
Seite.
Eingangserwägungen
calc()
kann keine Berechnungen auf intrinsische Größenwerte wieauto
undfit-content
durchführen. Verwenden Sie stattdessen diecalc-size()
Funktion.- Die
*
und/
Operatoren erfordern keinen Leerraum, aber es wird empfohlen, ihn zur Konsistenz hinzuzufügen. - Es ist erlaubt,
calc()
Funktionen zu verschachteln, wobei die inneren als einfache Klammern behandelt werden. - Aktuelle Implementierungen erfordern, dass bei der Verwendung der
*
und/
Operatoren einer der Operanden ohne Einheit sein muss. Für/
muss der rechte Operand ohne Einheit sein. Zum Beispiel istfont-size: calc(1.25rem / 1.25)
gültig, aberfont-size: calc(1.25rem / 125%)
nicht. - Mathematische Ausdrücke, die Prozentzahlen für Breiten und Höhen in Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können behandelt werden, als wäre
auto
angegeben. - Siehe
<calc-sum>
für weitere Informationen zur Syntax von+
und-
Ausdrücken.
Unterstützung zum Berechnen von Farbelementen in relativen Farben
Die calc()
Funktion kann verwendet werden, um Farbelemente direkt im Kontext von relativen Farben zu manipulieren. Dies ermöglicht dynamische Anpassungen der Farbelemente in Farbmodellen wie rgb()
, hsl()
und lch()
.
Die relative Farbsyntax definiert mehrere Farbelement-Schlüsselwörter, von denen jedes den Wert des Farbelements als <number>
darstellt (siehe Kanalwerte lösen sich zu <number>
Werten auf für weitere Informationen). Die calc()
Funktion kann diese Farbelement-Schlüsselwörter verwenden, um dynamische Anpassungen an den Farbelementen vorzunehmen, zum Beispiel calc(r + 10)
.
Formale Syntax
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 sich die Textgröße anpasst, wenn die Seite gezoomt wird.
Beispiele
Positionieren eines Objekts auf dem Bildschirm mit einem Abstand
calc()
macht es einfach, ein Objekt mit einem festgelegten Abstand zu positionieren. In diesem Beispiel erstreckt sich das CSS-Banner über das gesamte Fenster, 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, um in ihren Container zu passen
Ein weiterer Anwendungsfall für calc()
ist die Sicherstellung, dass Formularfelder in den verfügbaren Platz passen, ohne über die Kante ihres Containers hinauszuragen und dabei einen geeigneten Abstand beizubehalten.
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 die Eingabefelder eine geeignete Größe behalten, verwenden wir erneut calc()
, um festzulegen, dass sie die Breite ihres Containers minus 1em haben 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()
mit CSS-Variablen verwenden. Betrachten Sie den folgenden Code:
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
Nachdem alle Variablen expandiert sind, wird der Wert von widthC
calc(calc(100px / 2) / 2)
sein. Wenn er der width
Eigenschaft von .foo
zugewiesen wird, werden alle inneren calc()
Funktionen (egal wie tief verschachtelt) zu einfachen Klammern reduziert. Daher wird der Wert der width
Eigenschaft schließlich calc((100px / 2) / 2)
sein, was 25px
entspricht. Kurz gesagt, ein calc()
innerhalb eines calc()
ist identisch mit der Verwendung von Klammern.
Anpassung von Farbelementen in relativen Farben
Die calc()
Funktion kann verwendet werden, um einzelne Farbelemente in relativen Farben anzupassen, ohne die Farbelementwerte als Variablen speichern zu müssen.
Im untenstehenden 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 Farbelements 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>
.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 Ermittlung relativer Farben siehe den Abschnitt Verwenden von mathematischen Funktionen auf der Seite Verwenden relativer Farben.
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # calc-func |
Browser-Kompatibilität
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.