CSS Typed OM Level 1

[jsnkuhn]

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 parse strings and convert values into unitless pixel values. This is currently a pain to do.

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

Specification

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

Additional Signals

Open Issues

There is a fairly large list of issues still open labeled "css-typed-om-1" https://github.com/w3c/css-houdini-drafts/issues?q=is%3Aissue+is%3Aopen+label%3Acss-typed-om-1+

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=typed%20om

Current Implementations

Firefox is the only browser yet to support this.

Standards Positions

https://github.com/mozilla/standards-positions/issues/93

Browser bug reports

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

chrome bugs (a long list - can't find a meta bug): https://bugs.chromium.org/p/chromium/issues/list?q=typed%20om&can=2

webkit (can't find a meta bug): https://bugs.webkit.org/buglist.cgi?quicksearch=typed%20om%20css

Polls & Surveys

Last year it was pointed out that TypedOM was not high on the state of CSS results:

"In the https://github.com/web-platform-tests/interop/issues/245, "CSS Typed Object Model (computedStyleMap() API)" was selected by ~9% of survey takers, putting it in the bottom third of the 20 options. (There is https://github.com/web-platform-tests/interop/issues/245#issuecomment-1311874383 as with any survey data.)"

This is not particularly surprising because TypedOM is about working with CSS values in JS. I think it more likely that this would be higher on the list on the State of JS but, unless i'm missing something, TypedOM does not seem to be being tracked by the State of JS survey.

Workarounds

polyfills: https://github.com/csstools/css-typed-om seems mostly abandoned

https://github.com/GoogleChromeLabs/css-paint-polyfill

"As of version 3, this polyfill also includes basic implementations of CSS.supports(), CSS.registerProperty() and CSS unit functions (CSS.px() etc), which are injected in browsers without native support."