W3cubDocs

/Web APIs

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⁩.

* 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.

Syntax

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)

Parameters

number

A number to be used in the CSS unit value.

Return value

A CSSUnitValue object with the specified numeric value and unit.

Examples

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'

Specifications

Browser compatibility

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

See also

© 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