Issue
With some browsers starting to introduce the CSS Houdini API, I was wondering if there were any ways to identify if the CSS Properties and Values API is supported with CSS alone?
With Javascript I'm able to check if the API exists: ✅
typeof window.CSS.registerProperty !== 'undefined'
Are there any equivalences native to CSS? I was experimenting with the @support rule, but this only accepts properties and values -- not 'at-rules'. So the following will understandably not work. ❌
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
@supports ( @property : --my-color ) {
body { background:DarkSeaGreen ; }
}
@supports not ( @property : --my-color ) {
body { background:Crimson; }
}
Solution
Apparently best we can do at this point is to pretend that support of paint
worklet denotes support of CSS Typed OM @property
in style sheets: unlike @property
, <property-accepting-image>: paint(<ident>)
can be used in @supports
block.
Una Kravets uses this in her @property dev.to article:
@supports (background: paint(something)) {
/* [Typed OM `@property` should be supported here] */
}
She also notes that this is (was) not reliable in Chromiums from version 78 up to v84.
For current state of browsers according https://ishoudinireadyyet.com/ it should be safe to use this recommendation:
It seems plausible that UAs newly adopting Houdini will release support for both paint API and CSS OM in style sheets, i.e. the Chromium v84 scenario will not happen again. (And if it will, my bet is the Typed OM will be released prior to paint worklet, so the condition will be (unnecessarily) ignored in that versions.)
Answered By - myf
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.