CSS numeric factory functions
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The CSS numeric factory
functions, such as CSS.em() and
CSS.turn() are methods that return CSSUnitValues with the value being
the numeric argument and the unit being the name of the method used. These
functions create new numeric values less verbosely than using the
CSSUnitValue() constructor.
Syntax
js
CSS.number(number)
CSS.percent(number)
// <length>
CSS.em(number)
CSS.ex(number)
CSS.ch(number)
CSS.ic(number)
CSS.rem(number)
CSS.lh(number)
CSS.rlh(number)
CSS.vw(number)
CSS.vh(number)
CSS.vi(number)
CSS.vb(number)
CSS.vmin(number)
CSS.vmax(number)
CSS.cm(number)
CSS.mm(number)
CSS.Q(number)
CSS.in(number)
CSS.pt(number)
CSS.pc(number)
CSS.px(number)
// <angle>
CSS.deg(number)
CSS.grad(number)
CSS.rad(number)
CSS.turn(number)
// <time>
CSS.s(number)
CSS.ms(number)
// <frequency>
CSS.Hz(number)
CSS.kHz(number)
// <resolution>
CSS.dpi(number)
CSS.dpcm(number)
CSS.dppx(number)
// <flex>
CSS.fr(number)
Examples
We use the CSS.vmax() numeric factory function to create a
CSSUnitValue:
js
const height = CSS.vmax(50);
console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
In this example, we set the margin on our element using the CSS.px()
factory function:
js
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # namespacedef-css |
Browser compatibility
BCD tables only load in the browser