<calc-sum>
Der <calc-sum> CSS Datentyp repräsentiert einen Ausdruck, der eine Berechnung in einer beliebigen CSS-Mathematikfunktion durchführt. Der Ausdruck führt eine grundlegende arithmetische Operation von Addition und Subtraktion zwischen zwei Werten aus.
Syntax
Der <calc-sum>-Typ definiert zwei numerische Werte und einen der folgenden arithmetischen Operatoren zwischen ihnen.
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
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
Beschreibung
Die Operanden im Ausdruck können jeden Wert der <length>-Syntax haben. Sie können <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> verwenden.
Verschiedene Einheitentypen können in einem einzigen Ausdruck verwendet werden. Zum Beispiel ist das Subtrahieren von px von %, wie in calc(100% - 10px), ein gültiger Ausdruck.
Das Einbinden von CSS-Variablen in calc-sum-Ausdrücken ist ebenfalls erlaubt. Der folgende Code calc(10px + var(--variable)) ist ein gültiger Ausdruck.
Die + und - Operatoren müssen von Leerzeichen umgeben sein. Zum Beispiel wird calc(50% -8px) als Prozentsatz gefolgt von einer negativen Länge geparst — ein ungültiger Ausdruck — während calc(50% - 8px) als Prozentsatz gefolgt von einem Subtraktionsoperator und einer Länge gilt. Ebenso wird calc(8px + -50%) als Länge gefolgt von einem Additionsoperator und einem negativen Prozentsatz 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
BCD tables only load in the browser