CSS advanced attr() function

[xiaochengh]

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:

1. Basic version: Specified in CSS2. Allows usage in pseudo-element content property only as a string. This is already supported by all major browsers.
2. 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

[cynthia]

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

[hober]

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

• Switch advanced attr() to being var()-like
• attr()'s url type seems wrong
• Security concerns regarding attr()

[hober]

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.

[xiaochengh]

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

[tursunova]

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.