This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
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.
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)
numberA number to be used in the CSS unit value.
A CSSUnitValue object with the specified numeric value and unit.
We use the CSS.vmax() numeric factory function to create a CSSUnitValue:
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:
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
| Specification |
|---|
| CSS Typed OM Level 1> # numeric-factory> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
Hz_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
Q_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
factory_functions_static |
28 | 12 | 22 | 15 | 9 | 28 | 22 | 15 | 9 | 1.5 | 4.4 | 9 |
cap_static |
118 | 118 | No | 104 | 17.2 | 118 | No | 79 | 17.2 | 25.0 | 118 | 17.2 |
ch_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
cm_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
cqb_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
cqh_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
cqi_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
cqmax_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
cqmin_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
cqw_static |
105 | 105 | No | 91 | 16.4 | 105 | No | 72 | 16.4 | 20.0 | 105 | 16.4 |
deg_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
dpcm_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
dpi_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
dppx_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
dvb_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
dvh_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
dvi_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
dvmax_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
dvmin_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
dvw_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
em_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
escape_static |
46 | 79 | 31 | 33 | 10.1 | 46 | 31 | 33 | 10.3 | 5.0 | 46 | 10.3 |
ex_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
fr_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
grad_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
highlights_static |
105 | 105 | 140 | 91 | 17.2 | 105 | 140 | 72 | 17.2 | 20.0 | 105 | 17.2 |
ic_static |
118 | 118 | No | 104 | 16.4 | 118 | No | 79 | 16.4 | 25.0 | 118 | 16.4 |
in_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
kHz_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
lh_static |
118 | 118 | No | 104 | 16.4 | 118 | No | 79 | 16.4 | 25.0 | 118 | 16.4 |
lvb_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
lvh_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
lvi_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
lvmax_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
lvmin_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
lvw_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
mm_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
ms_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
number_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
paintWorklet_static |
65 | 79 | No | 52 | No | 65 | No | 47 | No | 9.0 | 65 | No |
pc_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
percent_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
pt_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
px_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
rad_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
rcap_static |
118 | 118 | No | 104 | 17.2 | 118 | No | 79 | 17.2 | 25.0 | 118 | 17.2 |
rch_static |
118 | 118 | No | 104 | 17.2 | 118 | No | 79 | 17.2 | 25.0 | 118 | 17.2 |
registerProperty_static |
78 | 79 | 128 | 65 | 16.4 | 78 | 128 | 56 | 16.4 | 12.0 | 78 | 16.4 |
rem_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
rex_static |
118 | 118 | No | 104 | 17.2 | 118 | No | 79 | 17.2 | 25.0 | 118 | 17.2 |
ric_static |
118 | 118 | No | 104 | 17.2 | 118 | No | 79 | 17.2 | 25.0 | 118 | 17.2 |
rlh_static |
118 | 118 | No | 104 | 16.4 | 118 | No | 79 | 16.4 | 25.0 | 118 | 16.4 |
s_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
supports_static |
28 | 12 | 22 | 15 | 9 | 28 | 22 | 15 | 9 | 1.5 | 4.4 | 9 |
svb_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
svh_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
svi_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
svmax_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
svmin_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
svw_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
turn_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
vb_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
vh_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
vi_static |
108 | 108 | No | 94 | 16.4 | 108 | No | 73 | 16.4 | 21.0 | 108 | 16.4 |
vmax_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
vmin_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
vw_static |
66 | 79 | No | 53 | 16.4 | 66 | No | 47 | 16.4 | 9.0 | 66 | 16.4 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/factory_functions_static