<calc-sum> CSS-Typ
Der <calc-sum> CSS Datentyp repräsentiert einen Ausdruck, der eine Berechnung mit einer beliebigen CSS-Mathematikfunktion durchführt. Der Ausdruck führt eine grundlegende arithmetische Operation der 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
Beschreibung
Die Operanden im Ausdruck können jeden <length>-Syntaxwert haben. Sie können <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> verwenden.
Die beiden Operandenarten müssen konsistent sein. Bei Längen können Sie nicht 0 verwenden, um 0px (oder eine andere Längeneinheit) zu bedeuten. Stattdessen müssen Sie eine explizite Einheit hinzufügen: margin-top: calc(0px + 20px); ist gültig, während margin-top: calc(0 + 20px); ungültig ist. Prozentwerttypen werden basierend auf dem Kontext aufgelöst. Zum Beispiel ist margin-top: calc(50% + 20px); gültig, da margin-top Prozentwerte in Längen auflöst.
Das Einbeziehen 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 "ein Prozentsatz gefolgt von einer negativen Länge" geparst — was ein ungültiger Ausdruck ist — während calc(50% - 8px) als "ein Prozentsatz gefolgt von einem Subtraktionsoperator und einer Länge" angesehen wird. Ebenso wird calc(8px + -50%) als "eine Länge gefolgt von einem Additionsoperator und einem negativen Prozentsatz" behandelt.
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # typedef-calc-sum |