<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.
Formale Syntax
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.