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

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

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

Solution

Edit 2. 2024: Jane Ori's investigation and POC suggests using rlh units support as a signal of @property support, i.e. adding (width: 1rlh) to the paint() support check to spread it to Firefox and Safari (and check them with their specific properties to be sure); see @supports @property CodePen by Jane Ori CodePen.

Edit 1. 2024: Firefox finally received support for declarative CSS OM, but still lacks the paint worklet support, so assumptions of this answer turned out to be off. Edited accordingly.

Edited original answer

Apparently best we could do at that point was to pretend that support of paint worklet denoted support of declarative CSS Typed OM @property in style sheets: unlike @property, <property-accepting-image>: paint(<ident>) can be used in @supports block.

Una Kravets used this in her @property dev.to article:

@supports (background: paint(something)) { /* [Typed OM `@property` should be supported here] */ }

but removed this pattern later in 2024-06, so the current version of the @property dev.to article does not contain this advice.

She also noted that this is (was) not reliable in Chromiums from version 78 up to v84.

For the state of browsers before 2024 according https://ishoudinireadyyet.com/ (this page does not seem to be updated for the 2024 state now in 2024 yet) it should have been safe to use the recommendation:

It seemed plausible that UAs newly adopting Houdini will release support both for paint API and CSS OM in style sheets simultaneously, 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.) Well, I've lost the bet.