Intent to Ship: CSS advanced attr() function

[Chromestatus]

Contact emails

moo...@google.com, chri...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-values-5/#attr-notation

Summary

Implement the augmentation to attr() specified in CSS Level 5, which allows types besides <string> and usage in all CSS properties (besides pseudo-element 'content'). Example: <style> div { background-color: attr(data-foo type(<color>), red); } </style> <div data-foo="blue">test</div>

Blink component

Blink>CSS

Search tags

css, css-values, attr

TAG review

https://github.com/w3ctag/design-reviews/issues/513

TAG review status

Pending

Risks

Interoperability and Compatibility

No browser has implemented this feature yet. Even though there's no negative signals from other browsers, there's still a minimal interoperability risk that we end up the only implementation. There are also a few known cases where this advanced version behaves differently from the basic version in pseudo-element content property, which is a compatibility risk: - https://bit.ly/2XDhHtg - https://bit.ly/3grF3ur

Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=435426)

WebKit: No signal (https://bugs.webkit.org/show_bug.cgi?id=26609)

Web developers: No signals

Other signals:

Security

attr() can be used by injected CSS for data exfiltration. https://github.com/w3c/csswg-drafts/issues/5092

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

No additional DevTools support is needed. attr() function is inspectable in DevTools same way as any other CSS substitution function.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=attr

Flag name on about://flags

CSSAdvancedAttrFunction

Finch feature name

CSSAdvancedAttrFunction

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=246571

Estimated milestones

Shipping on desktop	133
Shipping on Android	133
Shipping on WebView	133

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4680129030651904?gate=5932337540366336

This intent message was generated by Chrome Platform Status.