clamp
Description
The clamp function for CSS takes three calculations — a minimum value, a central value, and a maximum value — and represents its central calculation.
It is clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))).
Syntax
CSS
clamp()
Values
<clamp()> =
clamp(
<calc-sum>#{3}
)<calc-sum> =
<calc-product>
[ [ '+' | '-' ] <calc-product> ]*<calc-product> =
<calc-value>
[ [ '*' | '/' ] <calc-value> ]*<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<dimension>
A number with a unit.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaNe
The base of the natural logarithm, approximately equal to 2.7182818284590452354.
pi
The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.
infinity
Positive infinity.
-infinity
Negative infinity.
NaN
Not a number.
*
Multiplication.
/
Division.
+
Addition.
-
Subtraction.
