# Demo The following page uses a CSS Space Toggle to color the page green or red. It should color the page green when the engine used has `@property` support and red when the engine used does not support `@property`. URL: https://codepen.io/bramus/pen/bGjQVEm Code: ```css @property --registered { syntax: '*'; initial-value: ; inherits: false; } body { --bg-when-supported: var(--registered) green; --bg-when-not-supported: var(--registered, red); background: var(--bg-when-supported, var(--bg-when-not-supported)); } ``` # Results Actual Result: The page colors red in Safari Expected Result: The page colors green in Safari Other browsers: The page colors green in Chrome 119+ [^1] and Firefox Nightly. # The problem WebKit seems to ignore this part of the spec [^2] > If the value of the syntax descriptor is the universal syntax definition, then the initial-value descriptor is optional. If omitted, the initial value of the property is the guaranteed-invalid value. [^1]: This commit enabled that: https://chromium-review.googlesource.com/c/chromium/src/+/4890262 [^2]: https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
Created attachment 471833 [details] rendering in safari, firefox, chrome
<rdar://problem/131288198>
tested in Safari Technology Preview 198 20619.1.20.7 Firefox Nightly 129.0a1 12924.7.4 Google Chrome Canary 128.0.6582.0 6582.0