W3cubDocs

/Web APIs

CSS numeric factory functions

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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)

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 Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Hz 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
Q 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
factory_functions 28 12 22 No 15 9 4.4 28 22 15 9 1.5
ch 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
cm 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
cqb 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
cqh 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
cqi 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
cqmax 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
cqmin 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
cqw 105 105 No No 91 16.4 105 105 No 72 16.4 20.0
deg 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
dpcm 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
dpi 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
dppx 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
dvb 108 108 No No 94 16.4 108 108 No 73 16.4 No
dvh 108 108 No No 94 16.4 108 108 No 73 16.4 No
dvi 108 108 No No 94 16.4 108 108 No 73 16.4 No
dvmax 108 108 No No 94 16.4 108 108 No 73 16.4 No
dvmin 108 108 No No 94 16.4 108 108 No 73 16.4 No
dvw 108 108 No No 94 16.4 108 108 No 73 16.4 No
em 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
escape 46 79 31 No 33 10.1 46 46 31 33 10.3 5.0
ex 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
fr 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
grad 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
highlights 105 105 No No 91 No 105 105 No 72 No 20.0
in 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
kHz 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
lvb 108 108 No No 94 16.4 108 108 No 73 16.4 No
lvh 108 108 No No 94 16.4 108 108 No 73 16.4 No
lvi 108 108 No No 94 16.4 108 108 No 73 16.4 No
lvmax 108 108 No No 94 16.4 108 108 No 73 16.4 No
lvmin 108 108 No No 94 16.4 108 108 No 73 16.4 No
lvw 108 108 No No 94 16.4 108 108 No 73 16.4 No
mm 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
ms 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
number 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
paintWorklet 65 79 No No 52 No 65 65 No 47 No 9.0
pc 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
percent 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
pt 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
px 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
rad 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
registerProperty 78 79 No No 65 16.4 78 78 No 56 16.4 12.0
rem 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
s 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
supports 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 108 108 No No 94 16.4 108 108 No 73 16.4 No
svh 108 108 No No 94 16.4 108 108 No 73 16.4 No
svi 108 108 No No 94 16.4 108 108 No 73 16.4 No
svmax 108 108 No No 94 16.4 108 108 No 73 16.4 No
svmin 108 108 No No 94 16.4 108 108 No 73 16.4 No
svw 108 108 No No 94 16.4 108 108 No 73 16.4 No
turn 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
vb 108 108
NoSee bug 1287034.
No 94
16.4See bug 159801.
108 108
NoSee bug 1287034.
73
16.4See bug 159801.
No
vh 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
vi 108 108
NoSee bug 1287034.
No 94
16.4See bug 159801.
108 108
NoSee bug 1287034.
73
16.4See bug 159801.
No
vmax 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
vmin 66 79 No No 53 16.4 66 66 No 47 16.4 9.0
vw 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