<calc-sum> CSS-Typ
Der <calc-sum>-CSS-Datentyp stellt einen Ausdruck dar, der innerhalb einer mathematischen CSS-Funktion eine Berechnung durchführt. Der Ausdruck führt eine grundlegende arithmetische Operation aus: die Addition oder Subtraktion zweier Werte.
Syntax
Der Typ <calc-sum> besteht aus zwei numerischen Werten und einem der folgenden arithmetischen Operatoren zwischen ihnen:
Beschreibung
Die Operanden im Ausdruck können Werte mit der Syntax von <length> sein. Sie können <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> verwenden.
Die Typen der beiden Operanden müssen zueinander passen. Bei Längen können Sie 0 nicht als Ersatz für 0px (oder eine andere Längeneinheit) verwenden. Stattdessen müssen Sie eine Einheit ausdrücklich angeben: margin-top: calc(0px + 20px); ist gültig, während margin-top: calc(0 + 20px); ungültig ist. Prozentwerte werden abhängig vom Kontext aufgelöst. Beispielsweise ist margin-top: calc(50% + 20px); gültig, da margin-top Prozentwerte als Längen auflöst.
Auch CSS-Variablen dürfen in calc-sum-Ausdrücken verwendet werden. 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, gefolgt von einer negativen Länge“ geparst – ein ungültiger Ausdruck. Dagegen wird calc(50% - 8px) als „ein Prozentwert, gefolgt von einem Subtraktionsoperator und einer Länge“ geparst. Ebenso wird calc(8px + -50%) als „eine Länge, gefolgt von einem Additionsoperator und einem negativen Prozentwert“ behandelt.
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
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # typedef-calc-sum |