<calc-sum>

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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.

+

Addiert zwei Zahlen miteinander.

-

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 verwenden. Sie können <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> nutzen.

Die Typen der beiden Operanden müssen übereinstimmen. Bei Längenangaben 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, weil margin-top Prozentsätze in Längen auflöst.

Auch die Einbeziehung von CSS-Variablen in calc-sum-Ausdrücken ist erlaubt. Folgender Code calc(10px + var(--variable)), ist ein gültiger Ausdruck.

Die + und - Operatoren müssen von Leerzeichen umgeben sein. Beispielsweise wird calc(50% -8px) als "ein Prozentsatz gefolgt von einer negativen Länge" geparsed – was ein ungültiger Ausdruck ist – während calc(50% - 8px) als "ein Prozentsatz 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 Prozentsatz" behandelt.

Spezifikationen

Specification
CSS Values and Units Module Level 4
# typedef-calc-sum

Siehe auch