Design Review #513

#513: CSS advanced attr() function

Opened May 13, 2020

Hello TAG!

I'm requesting a TAG review of the advanced version of the CSS attr() function.

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. There are two versions:

Basic version: Specified in CSS2. Allows usage in pseudo-element content property only as a string. This is already supported by all major browsers.
Advanced version: Specified in CSS Values and Units L4. Allows usage in all CSS properties, and can represent various types of values

Explainer: https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Examples
Specification URL: https://drafts.csswg.org/css-values-4/#attr-notation
Tests:
- Existing WPT: https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned=&q=attr
- Plan to add more: https://bugs.chromium.org/p/chromium/issues/detail?id=1081995
Primary contacts:
- CSSWG for the specification
- Xiaocheng Hu (xiaochengh), Google for the Chromium implementation
Organization driving the specification: CSSWG
External status/issue trackers for this specification:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=246571
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=26609
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=435426

You should also know that...

In CSS4, the feature has been substantially revised to ease implementations. Most importantly, it now works similar to var(), namely, attr() is considered valid at parse time, and the actual validation of the attribute value is deferred to computed value time. Please review this version.

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify

Discussions

Comment by @cynthia May 26, 2020 (See Github)

@kenchris and I briefly discussed this during the VF2F, and concluded this is probably best reviewed by someone else. @torgo @plinss help?

Comment by @hober May 27, 2020 (See Github)

N.B. these open css-values-4 issues:

Comment by @hober May 27, 2020 (See Github)

Hi @xiaochengh!

@dbaron, @plinss, and I looked at this during the TAG F2F this week. We note that there is active discussion on the open issues I linked above, and we're happy to see that the CSS WG is trying to figure all of this out right now. Note that in the CSS WG, editors often add proposals to specs, which then get reviewed and resolved on by the WG. The TAG generally does our design review later in that process, after the WG resolutions. When these issues have been resolved, please come back to us and we'd be happy to review the result.

Comment by @xiaochengh May 27, 2020 (See Github)

Thanks! I'll wait until the CSSWG fixes the spec.

Comment by @tursunova Nov 14, 2024 (See Github)

Hi @hober!

Could we please reopen this issue for TAG review or should I create a new one? We are planning to ship attr() in Chromium and currently there are no open CSSWG issues left for attr.

Thank you.