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
| Specification |
|---|
| CSS Typed OM Level 1 # numeric-factory |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS
|
|
|
|
|
|
|
|
|
|
|
|
|
Hz() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
Q() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cap() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
ch() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cm() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cbq() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cqh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cqi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cqmax() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cqmin() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
cqw() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
deg() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dpqm() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dpi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dppx() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvb() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvmax() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvmin() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
dvw() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
em() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
escape() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
ex() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fr() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
grad() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
highlights static property
|
|
|
|
|
|
|
|
|
|
|
|
|
ic() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
in() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
kHz() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvb() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvmax() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvmin() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
lvw() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
mm() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
ms() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
number() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
paintWorklet static property
|
|
|
|
|
|
|
|
|
|
|
|
|
pc() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
percent() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
pt() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
px() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rad() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rcap() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rch() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
registerProperty() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rem() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rex() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
ric() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
rlh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
s() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
supports() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Parentheses for single-argument version are optional.
|
|
|
|
|
|
|
|
|
|
|
|
|
svb() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
svh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
svi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
svmax() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
svmin() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
svw() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
turn() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vb() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vh() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vi() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vmax() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vmin() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
vw() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.