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; }
}
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. Full @supports
block in her pen goes like this:
/*
Detects if @property is supported in general:
*/
@supports (background: paint(propjockey)) or (
(width: 1rlh) and (
(-webkit-hyphens: none) or (-moz-appearance: none)
)
) {
/*
is Chrome or (is Safari and >= v17 or Firefox and >= v120)
(@property and rlh unit shipped at the same time for both Safari & FF!)
*/
:root { background: green; }
}
/*
Detects if @property is supported AND has correct integer rounding:
*/
@supports (background: paint(propjockey)) or (
(-webkit-hyphens: none) and (font-size-adjust: from-font)
) or (
(-moz-appearance: none) and (width: 1rlh)
) {
/*
is Chrome or (is Safari and >= v17) or (Firefox and >= v120)
*/
:root { background: lime; }
}
Copyright (c) 2025 by Jane Ori 💜 (
https://codepen.io/propjockey/pen/OJdJmya
)Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Edit 1. 2024: Firefox finally received support for declarative CSS OM, but still lacks the paint worklet support, so assumptions of this answer and suggestions it gave turned out to be wrong. Edited accordingly.
Edited original answer 2021 - 2024 (for archiving/historic purposes):
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 this bet.