Intent to prototype: Advanced CSS attr() function

[Swarup Ukil]

Summary:

The basic CSS attr() function has been supported since Firefox 1; however, support for it has been limited to the content property. With advanced attr(), we extend its support to any CSS property, including registered and unregistered custom properties. This is facilitated by supporting a wider range of data types like length and color:

• width: attr(data-foo type(<length>));

• background-color: attr(data-foo type(<color>));

• --x: attr(data-foo px);

See example usages on MDN.

We are aiming to have advanced attr() enabled on Nightly today. Please feel free to let us know if you have any questions or concerns.

Bug: Bug 435426 - (css-attr) [meta]
Specification: https://drafts.csswg.org/css-values-5/#attr-notation

Standards Body: CSSWG / W3C

Platform coverage: All.
Preference: layout.css.attr.enabled (Bug 2038939 to enable on Nightly)
DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=2003735

Extensions bug: N/A

Use counter: N/A - existing content: attr() usage would show up a lot, which dilutes the useful signal.
Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/1143

Other browsers:

• Blink 133 – shipped

• WebKit – enabled as preview (STP 242)

web-platform-tests: https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=css-values%2Fattr