Using CSS can I check if a browser supports the "CSS Properties and Values API" (Houdini) @property rule

user_843131 0
Viewed 240

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; }
}

☝️ CodePen Example

css-houdini browser-support css
2 Answers

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:

ishoudinireadyyet.com table showing that all browsers supporting the Paint API also supports CSS Typed OM

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.)

user_5409550

You can also use window.CSS.paintWorklet to check houdini api is supported or not.

user_130998940
Related