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

mozilla/standards-positions#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 #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 #245 (comment) 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."

[gsnedders]

https://wpt.fyi/results/css/css-typed-om?label=master&label=experimental&aligned&q=not%20path%3A%2Fcss%2Fcss-typed-om%2Fthe-stylepropertymap%2Fproperties%20not%20is%3Atentative or something, maybe?

[wpt-interop]

Thank you for proposing CSS Typed OM Level 1 for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.