CSSMathClamp: CSSMathClamp() constructor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
Note: This feature is available in Web Workers.
The CSSMathClamp() constructor creates a new CSSMathClamp object representing a CSS clamp() function.
Syntax
new CSSMathClamp(lower, value, upper)
Parameters
lower-
A number or
CSSNumericValuethat represents the minimum value. value-
A number or
CSSNumericValuethat represents the preferred value. upper-
A number or
CSSNumericValuethat represents the maximum value.
Exceptions
TypeError-
Thrown if the parameters have conflicting unit types. For example, mixing a length value with a time value.
Examples
Basic usage
The following code creates a CSSMathClamp instance from three lengths, then reads back its lower, value, and upper properties.
const clamp = new CSSMathClamp(CSS.px(10), CSS.percent(50), CSS.px(500));
console.log(clamp.constructor.name); // "CSSMathClamp"
console.log(clamp.lower); // CSSUnitValue {value: 10, unit: "px"}
console.log(clamp.value); // CSSUnitValue {value: 50, unit: "percent"}
console.log(clamp.upper); // CSSUnitValue {value: 500, unit: "px"}
Handling incompatible types
The constructor throws a TypeError if the three arguments don't resolve to a compatible type.
In the following code we mix a length with a time, and log the error.
try {
// Mixes a length (px) with a time (s): incompatible types
new CSSMathClamp(CSS.px(10), CSS.s(2), CSS.px(500));
} catch (e) {
console.log(e instanceof TypeError); // true
console.log(e.message);
}
Specifications
| Specification |
|---|
| CSS Typed OM Level 1 # dom-cssmathclamp-cssmathclamp |