W3cubDocs

/Web APIs

CSS numeric factory functions

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

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