Here we'll take a more in depth look at the CSSNumericValue type. As we've seen it's the super class for both the CSSUnitValue and CSSMathValue.
Let's start by looking at the CSSUnitValue, the different types of units there are and different ways to create them.
Before we do that, let's refresh what's returned if a value is of type CSSunitValue
NB Due to the nature of code examples on this page, the javascript file is logging results to the console, (rather than affecting an element as in the intro), so you can view the code running in the developer tools pane and you can find the javascript file here
const el = document.querySelector('h2');
// set line-height
el.attributeStyleMap.set('line-height', '1.3');
// get line-height
const lineHeight = el.attributeStyleMap.get('line-height');
// Returns: CSSUnitValue {value: 1.3, unit: "number"}Here we are setting a line-height value on an h2 element and retrieving it again with the set() and get() methods of the attributeStyleMap property.
A CSSUnitValue is returned, which contains a value and a unit. Here the unit is of type 'number'. Let's see how we create a CSSUnitValue and while we're at it a couple of different unit types.
Creating a unit value
There are two ways to do this. The first is to create the object directly:
const percentVal = new CSSUnitValue(50, 'percent');
// Returns: CSSUnitValue {value: 50, unit: "percent"}Here we're creating a percent unit with 50 as it's value, the equivalent of 50% in CSS.
The other way is using the factory method, in practise it creates the same and for the most part would be preferable as the code is simpler.
const pixelVal = CSS.px(42);
// Returns: CSSUnitValue {value: 42, unit: "pixel"}Both of these methods can accept a string instead of a number as it's value and will still parse.
const emVal = new CSSUnitValue('1.2', 'em');
// Returns: CSSUnitValue {value: 1.2, unit: "em"}
const remVal = CSS.rem('2.4', 'rem');
// Returns: CSSUnitValue {value: 2.4, unit: "rem"}Different unit types
In the examples above we've seen number, percent and length type units. There are also angle, time, frequency, resolution and flex; eight altogether. Here's a list of all the units, sorted by type, with examples of how to create them with both methods.
NB Remember you can use a string instead of a number in any of these examples.
Number
const numVal = new CSSUnitValue(1.2, 'number');
// or
const numVal = CSS.number(1.2);
// Returns: CSSUnitValue {value: 1.2, unit: "number"}Percent
const percentVal = new CSSUnitValue(30, 'percent');
// or
const percentVal = CSS.percent(30);
// Returns: CSSUnitValue {value: 30, unit: "percent"}Length
There are lots of different length values you can use in CSS. Here is a link to the relevant documentation for each in this list in case you're unfamiliar with the unit.
em
const emVal = new CSSUnitValue(1.2, 'em');
// or
const emVal = CSS.em(1.2);
// Returns: CSSUnitValue {value: 1.2, unit: "em"}rem
const remVal = new CSSUnitValue(2.4, 'rem');
// or
const remVal = CSS.rem(2.4);
// Returns: CSSUnitValue {value: 2.4, unit: "rem"}ch
const chVal = new CSSUnitValue(2, 'ch');
// or
const chVal = CSS.ch(2);
// Returns: CSSUnitValue {value: 2, unit: "ch"}ex
const exVal = new CSSUnitValue(1.6, 'ex');
// or
const exVal = CSS.ex(1.6);
// Returns: CSSUnitValue {value: 1.6, unit: "ex"}vw
const vwVal = new CSSUnitValue(40, 'vw');
// or
const vwVal = CSS.vw(40);
// Returns: CSSUnitValue {value: 40, unit: "vw"}vh
const vhVal = new CSSUnitValue(60, 'vh');
// or
const vhVal = CSS.vh(60);
// Returns: CSSUnitValue {value: 60, unit: "vh"}vmin
const vminVal = new CSSUnitValue(50, 'vmin');
// or
const vminVal = CSS.vmin(50);
// Returns: CSSUnitValue {value: 50, unit: "vmin"}vmax
const vmaxVal = new CSSUnitValue(40, 'vmax');
// or
const vmaxVal = CSS.vmax(40);
// Returns: CSSUnitValue {value: 40, unit: "vmax"}px
const pxVal = new CSSUnitValue(10, 'px');
// or
const pxVal = CSS.px(10);
// Returns: CSSUnitValue {value: 10, unit: "px"}cm
const cmVal = new CSSUnitValue(5, 'cm');
// or
const cmVal = CSS.cm(5);
// Returns: CSSUnitValue {value: 5, unit: "cm"}mm
const mmVal = new CSSUnitValue(15, 'mm');
// or
const mmVal = CSS.mm(15);
// Returns: CSSUnitValue {value: 15, unit: "mm"}Q
const QVal = new CSSUnitValue(100, 'Q');
// or
const QVal = CSS.Q(100);
// Returns: CSSUnitValue {value: 100, unit: "q"}in
const inVal = new CSSUnitValue(60, 'in');
// or
const inVal = CSS.in(60);
// Returns: CSSUnitValue {value: 60, unit: "in"}pc
const pcVal = new CSSUnitValue(12, 'pc');
// or
const pcVal = CSS.pc(12);
// Returns: CSSUnitValue {value: 12, unit: "pc"}pt
const ptVal = new CSSUnitValue(72, 'pt');
// or
const ptVal = CSS.pt(72);
// Returns: CSSUnitValue {value: 72, unit: "pt"}NB: The following are all length units but have not been implemented at the time of writing: ic lh rlh vi vb
Angle
There is a reference for all angle type units here.
deg
const degVal = new CSSUnitValue(180, 'deg');
// or
const degVal = CSS.deg(180);
// Returns: CSSUnitValue {value: 180, unit: "deg"}grad
const gradVal = new CSSUnitValue(200, 'grad');
// or
const gradVal = CSS.grad(200);
// Returns: CSSUnitValue {value: 200, unit: "grad"}rad
const radVal = new CSSUnitValue(3.1, 'rad');
// or
const radVal = CSS.rad(3.1);
// Returns: CSSUnitValue {value: 3.1, unit: "rad"}turn
const turnVal = new CSSUnitValue(0.5, 'turn');
// or
const turnVal = CSS.turn(0.5);
// Returns: CSSUnitValue {value: 0.5, unit: "turn"}Time
There is a reference for time units here.
s
const sVal = new CSSUnitValue(1, 's');
// or
const sVal = CSS.s(1);
// Returns: CSSUnitValue {value: 1, unit: "s"}ms
const msVal = new CSSUnitValue(200, 'ms');
// or
const msVal = CSS.ms(200);
// Returns: CSSUnitValue {value: 200, unit: "ms"}Frequency
The reference for frequency units can be found here.
Hz
const HzVal = new CSSUnitValue(440, 'Hz');
// or
const HzVal = CSS.Hz(440);
// Returns: CSSUnitValue {value: 440, unit: "hz"}kHz
const kHzVal = new CSSUnitValue(3, 'kHz');
// or
const kHzVal = CSS.kHz(3);
// Returns: CSSUnitValue {value: 3, unit: "khz"}Resolution
There is a reference for all resolution units here.
dpi
const dpiVal = new CSSUnitValue(3, 'dpi');
// or
const dpiVal = CSS.dpi(3);
// Returns: CSSUnitValue {value: 3, unit: "dpi"}dpcm
const dpcmVal = new CSSUnitValue(2.54, 'dpcm');
// or
const dpcmVal = CSS.dpcm(2.54);
// Returns: CSSUnitValue {value: 2.54, unit: "dpcm"}dppx
const dppxVal = new CSSUnitValue(1, 'dppx');
// or
const dppxVal = CSS.dppx(1);
// Returns: CSSUnitValue {value: 1, unit: "dppx"}Flex
The flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container. You can read more about it here.
fr
const frVal = new CSSUnitValue(1, 'fr');
// or
const frVal = CSS.fr(1);
// Returns: CSSUnitValue {value: 1, unit: "fr"}NB These only create numeric values. If, for instance, you wanted to create a flex: auto; CSS syntax you would need to use the CSSKeywordVaue type instead.
There's a lot of different unit types, but it makes sense they are all implemented. Now let's see the other CSSNumericValue sub class: CSSMathValue in the next section.