Description

from spec:

Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. This specification exposes CSS values as typed JavaScript objects, to make manipulating them both easier and more performant.

an explainer article from chrome: https://developer.chrome.com/blog/cssom/

Rationale

Most painAPI demos (like those at houdini.how) accept only unitless values for custom properties. This is because unitless pixel values are what is needed for the JS worklet code. Not accepting normal CSS units like em/rem/% gets around having to parsing strings and convert values into unitless pixel values. This is currenly a pain to do.

TypedOM gives us JS objects instead of stings for CSS values that are much eaiser to work with. Makes it easier to seperate a value from its unit and covert from for example em to px.

I believe this requires registered custom properties so it works together with the Properties and Values API (i.e. @Property)

Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1278697

Specification

https://drafts.css-houdini.org/css-typed-om/

Tests

https://wpt.fyi/results/css/css-typed-om?label=experimental&label=master&aligned&view=subtest