CSS Typed OM Level 1 #1088
Description
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/
web-feature
https://web-platform-dx.github.io/web-features-explorer/features/css-typed-om/
Test Links
https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=typed%20om
recommended tests from last years proposal (#746 (comment)) :
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."