Bug 241475 – Allow keywords in CSS custom property fallback

• Status: NEW
• Component: CSS

[Shaw Jia]

Allow the use of keywords in custom property fallback.

One useful use case is to allow the use of "revert" to use user-agent stylesheet value as fallback.

Ex: * {display:var(--display,revert); --display:initial}

The example may seem redundant, but becomes useful with more complex logic such as responsive variants, modular scale for font sizes etc.

Firefox already supports this, Chrome is in the process of fixing it in https://bugs.chromium.org/p/chromium/issues/detail?id=1105782

[Radar WebKit Bug Importer]

<rdar://problem/94822036>

[Shaw Jia]

Any updates to this?

Safari is now the only browser that doesn't support keywords in CSS variable (custom property) fallback. Both Chrome and Firefox supports it.

[Christopher Kirk-Nielsen]

I believe I have run into the same issue and I'm seeing the correct styles in Chrome and Firefox, but not Safari.
I have a reduced test case here which is manifested when toggling Dark Mode: https://codepen.io/chriskirknielsen/pen/emOBrvZ?editors=1100
Happy to create a new ticket if I'm incorrect about this being the same bug.