CSS numeric factory functions

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

let 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));
let currentMargin = myElement.attributeStyleMap.get('margin');
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'

Specification

Specification Status Comment
CSS Object Model (CSSOM)
The definition of 'Numeric Factory Functions' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSS
Experimental
Chrome Full support 28Edge Full support ≤18Firefox Full support 22
Full support 22
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 12.1Safari Full support 10WebView Android Full support 4.4Chrome Android Full support 28Firefox Android Full support 22
Full support 22
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support YesSamsung Internet Android Full support 1.5
Hz
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
Q
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
ch
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
cm
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
deg
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
dpcm
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
dpi
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
dppx
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
em
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
escape
Experimental
Chrome Full support 46Edge Full support 79Firefox Full support 31IE No support NoOpera Full support 33Safari Full support 10WebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 31Opera Android Full support 33Safari iOS Full support 10Samsung Internet Android Full support 5.0
ex
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
fr
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
grad
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
ic
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
in
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
kHz
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
lh
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mm
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
ms
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
number
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
paintWorklet
Experimental
Chrome Full support 65Edge Full support 79Firefox ? IE No support NoOpera Full support 52Safari No support NoWebView Android Full support 65Chrome Android Full support 65Firefox Android ? Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
pc
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
percent
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
pt
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
px
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
rad
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
registerProperty
Experimental
Chrome Full support 78Edge Full support 79Firefox No support NoIE No support NoOpera Full support 65Safari No support NoWebView Android Full support 78Chrome Android Full support 78Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 12.0
rem
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
rlh
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
s
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
supportsChrome Full support 61
Full support 61
Partial support 28
Notes
Notes Version 60 or older didn't support parentheses-less one-argument version.
Edge Partial support 12
Notes
Partial support 12
Notes
Notes Edge doesn't support parentheses-less one-argument version.
Firefox Full support 55
Full support 55
Partial support 22
Notes
Notes Version 54 or older didn't support parentheses-less one-argument version.
Partial support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 12.1Safari Full support 10WebView Android Full support 61
Full support 61
Partial support 37
Notes
Notes Version 60 or older didn't support parentheses-less one-argument version.
Chrome Android Full support 61
Full support 61
Partial support 28
Notes
Notes Version 60 or older didn't support parentheses-less one-argument version.
Firefox Android Full support 55
Full support 55
Partial support 22
Notes
Notes Version 54 or older didn't support parentheses-less one-argument version.
Partial support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support YesSamsung Internet Android Full support 8.0
Full support 8.0
Partial support 1.5
Notes
Notes Samsung Internet 8.0 or older didn't support parentheses-less one-argument version.
turn
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
vb
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vh
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
vi
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vmax
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
vw
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
wmin
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also