CSS/Funktionen/calc-size()

Browserunterstützung
caniuse.com

Die CSS-Funktion calc-size() ermöglicht es Berechnungen mit intrinsischen Werten wie auto, fit-content, und max-content durchzuführen,; dies ist mit der calc()-Funktion nicht möglich.

anwendbar auf

Parameter

calc-size(<calc-size-basis>, <calc-sum>)

• <calc-size-basis>
  Der Wert (in der Regel eine intrinsische Größe), für den Sie eine Berechnung durchführen möchten.
  • auto
  • min-content
  • max-content
  • fit-content
  • content (für Container auf flex-basis).
• <calc-sum>
  Ein Ausdruck, der die Berechnung definiert, die für <calc-size-basis> durchgeführt werden soll.
  • Das Schlüsselwort „size“ für die als erstes Argument angegebene <calc-size-basis>.
  • Operanden können „size“ und alle Wertetypen enthalten, die im Kontext sinnvoll sind.
  • Die Operatoren +, -, * und / können verwendet werden.
  • Andere mathematische Funktionen wie round(), max() oder sogar eine verschachtelte calc-size() können ebenfalls enthalten sein.
    Der gesamte Ausdruck muss mit <length-percentage> übereinstimmen und zu einer <length> aufgelöst werden.

Beispiel

/* Pass a value through calc-size() */

calc-size(auto, size) calc-size(fit-content, size)

/* Perform a calculation */ calc-size(min-content, size + 100px) calc-size(fit-content, size / 2)

/* Calculation including a function */

calc-size(auto, round(up, size, 50px))

 

Weblinks

• W3C: Mathematical Expressions: calc-size()
• MDN: calc-size()
• Browser-Support: caniuse.com