The benefits of CSS Typed OM include:
In CSSOM land:
We get specified and computed values for CSS properties of an element in CSSOM via the
.style attribute on an element and the
getComputedStyle() object respectively.
In Typed OM:
We get them of
StylePropertyMaps on elements.
To get the specified height from an element we would use the following JS:
element.attributeStyleMap.get('height'); // returns a string
Similarly to get the computed value of a CSS property we would do the following:
element.computedStyleMap().get('height'); // returns a CSSUnitValue
To understand the power of Typed OM take a look at the example in CSSOM below:
let heightValue = target.style.height.slice(0,-2); heightValue++; target.style.height = heightValue + 'px';
In the above example, we are manipulating the
height CSS property by:
The CSS parser will then parse the final string and convert it back to a number for the CSS engine.
let heightValue = element.attributeStyleMap.get('height'); heightValue.value++; target.attributeStyleMap.set('height', heightValue);
In the above code,
heightValue gets assigned a
CSSUnitValue with a value set to the current value of the height and the unit set to 'px'. You can then modify the unit as you would do an integer and not have to incur the cost of manipulating a string.
CSSStyleValue is the base class through which all CSS values are expressed. For a detailed list of what CSSStyleValue subclasses each CSS property maps to please see here. Values that aren't supported yet will also be considered as CSSStyleValue objects.
CSSKeywordValue objects represent CSS keywords and other identifiers. An example would be:
element.attributeStyleMap.set("display", new CSSKeywordValue("none")));
CSSNumericValue objects represent CSS values that are numeric in nature.
The class can be broken down into two subclasses:
CSSUnitValue(10, 'px')for example is the typed representation of
CSSMathSum(CSS.em(1), CSS.px(5))for example is the typed representation of
calc(1em + 5px)
CSSTransformValue objects represent via CSSTransformComponents values, the different functions used by the
CSSPositionValue help express the position of an object (e.g. background image) inside a positioning area (e.g. a div).
CSSResourceValue objects represent CSS values that require an asynchronous network fetch. Hence, they also describe the status the resource is in. Properties with image values (e.g.
background-image), are represented by CSSImageValues
Unregistered custom properties are represented by CSSUnparsedValues in the Typed OM API.
var() references are represented using CSSVariableReferenceValues.
The current specification doesn't have support for the following, however support for the following is under consideration for Typed OM Level 2:
Currently you can try out CSS Typed OM in Chromium based browsers (it is behind a flag though.)
Do let us know if you are having trouble with Typed OM or are missing capabilities by filing an issue on GitHub.