CSS <image> Syntax for registered Custom Properties

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 120)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: #enable-experimental-web-platform-features
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/css/css-properties-values-api/at-property.html https://wpt.fyi/css/css-properties-values-api/register-property-syntax-parsing.html https://wpt.fyi/css/css-properties-values-api/typedom.html

Summary

Supports using the <image> syntax for custom properties registered with @property or registerProperty(). The <image> syntax can be used to restrict values of the custom property to url() values and generated images like gradients.

Standards & signals

Specification: https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-strings
Firefox: Positive — Implementation behind a flag. Does not support interpolation.
Safari: Shipped/Shipping — Does not support interpolation
Web developers: No signals

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-properties-values-api
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20%3Cimage%3E%20Syntax%20for%20registered%20Custom%20Properties
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20%3Cimage%3E%20Syntax%20for%20registered%20Custom%20Properties
Baseline status: https://webstatus.dev/?q=CSS%20%3Cimage%3E%20Syntax%20for%20registered%20Custom%20Properties

View on chromestatus.com