CSS Typed OM Level 1 (houdini)

[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/

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

• Blink
• Gecko
• WebKit

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

Developer discussions

No response

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.

Existing Usage

No response

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.

Accessibility Impact

No response

Privacy Impact

No response

Other

If only one of the Houdini APIs is chosen again this year i believe it is better to go with TypedOM. So that it is in place and usable when the PaintAPI is ultimately added.

[foolip]

Thank you for proposing CSS Typed OM for inclusion in Interop 2024.

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

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

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

Posted on behalf of the Interop team.