<calc-sum>

Der <calc-sum> CSS Datentyp repräsentiert einen Ausdruck, der eine Berechnung in einer beliebigen CSS-Math-Funktion ausführt. Der Ausdruck führt eine grundlegende arithmetische Operation der Addition und Subtraktion zwischen zwei Werten durch.

Syntax

Der <calc-sum> Typ definiert zwei numerische Werte und einen der folgenden arithmetischen Operatoren zwischen ihnen.

+

Addiert zwei Zahlen zusammen.

-

Subtrahiert die rechte Zahl von der linken.

Formale Syntax

<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

Beschreibung

Die Operanden im Ausdruck können jeden <length>-Syntaxwert darstellen. Sie können <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> verwenden.

Die Typen der beiden Operanden müssen übereinstimmen. Für Längenangaben können Sie 0 nicht als 0px (oder eine andere Längeneinheit) interpretieren. Stattdessen müssen Sie eine eindeutige Einheit angeben: margin-top: calc(0px + 20px); ist gültig, während margin-top: calc(0 + 20px); ungültig ist. Prozentwert-Typen werden basierend auf dem Kontext aufgelöst. Zum Beispiel ist margin-top: calc(50% + 20px); gültig, da margin-top Prozentwerte zu Längen auflöst.

Die Einbeziehung von CSS-Variablen in calc-sum-Ausdrücken ist ebenfalls zulässig. Der folgende Code calc(10px + var(--variable)) ist ein gültiger Ausdruck.

Die Operatoren + und - müssen von Leerraum umgeben sein. Beispielsweise wird calc(50% -8px) als "ein Prozentwert, dem eine negative Länge folgt" geparst – was ein ungültiger Ausdruck ist – während calc(50% - 8px) als "ein Prozentwert, gefolgt von einem Subtraktionsoperator und einer Länge" interpretiert wird. Ebenso wird calc(8px + -50%) als "eine Länge, gefolgt von einem Additionsoperator und einem negativen Prozentwert" behandelt.

Spezifikationen

No specification found

No specification data found for css.types.calc-sum.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

No compatibility data found for css.types.calc-sum.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

Siehe auch