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.
On this page
CSS numeric factory functions
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Hz_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
Q_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
factory_functions_static |
28 | 12 | 22 | No | 15 | 9 | 4.4 | 28 | 22 | 15 | 9 | 1.5 |
ch_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
cm_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
cqb_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
cqh_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
cqi_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
cqmax_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
cqmin_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
cqw_static |
105 | 105 | No | No | 91 | 16.4 | 105 | 105 | No | 72 | 16.4 | 20.0 |
deg_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
dpcm_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
dpi_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
dppx_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
dvb_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
dvh_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
dvi_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
dvmax_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
dvmin_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
dvw_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
em_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
escape_static |
46 | 79 | 31 | No | 33 | 10.1 | 46 | 46 | 31 | 33 | 10.3 | 5.0 |
ex_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
fr_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
grad_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
highlights_static |
105 | 105 | preview | No | 91 | No | 105 | 105 | No | 72 | No | 20.0 |
in_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
kHz_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
lvb_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
lvh_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
lvi_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
lvmax_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
lvmin_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
lvw_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
mm_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
ms_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
number_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
paintWorklet_static |
65 | 79 | No | No | 52 | No | 65 | 65 | No | 47 | No | 9.0 |
pc_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
percent_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
pt_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
px_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
rad_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
registerProperty_static |
78 | 79 | preview | No | 65 | 16.4 | 78 | 78 | No | 56 | 16.4 | 12.0 |
rem_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
s_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
supports_static |
61
28–61The parentheses-less one-argument version is not supported. |
79
12–79The parentheses-less one-argument version is not supported. |
55
22–55The parentheses-less one-argument version is not supported. |
No | 48
15–48The parentheses-less one-argument version is not supported. |
11
9–11The parentheses-less one-argument version is not supported. |
61
4.4–61The parentheses-less one-argument version is not supported. |
61
28–61The parentheses-less one-argument version is not supported. |
55
22–55The parentheses-less one-argument version is not supported. |
45
15–45The parentheses-less one-argument version is not supported. |
11
9–11The parentheses-less one-argument version is not supported. |
8.0
1.5–8.0The parentheses-less one-argument version is not supported. |
svb_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
svh_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
svi_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
svmax_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
svmin_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
svw_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
turn_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
vb_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
vh_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
vi_static |
108 | 108 | No | No | 94 | 16.4 | 108 | 108 | No | 73 | 16.4 | 21.0 |
vmax_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
vmin_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
vw_static |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
See also
© 2005–2023 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