The `initial-value` descriptor when registering Custom Properties can be optional

• Component: CSS
• Status: NEW ---

[Bramus]

# 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

[Karl Dubost]

Created attachment 471833 [details]
rendering in safari, firefox, chrome

[Radar WebKit Bug Importer]

<rdar://problem/131288198>

[Karl Dubost]

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