CSS advanced attr() function

Category: CSS
Type: New or changed feature
Status: In development (Chrome In development)
Intent stage: Start prototyping

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>

Motivation

This is a highly requested feature, with 123 stars at crbug.com/246571. We also want to keep it considered in the CR period by adding the first implementation.

Standards & signals

Specification: https://drafts.csswg.org/css-values-5/#attr-notation
Firefox: No signal
Safari: No signal
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=246571

Explainers: https://github.com/tursunova/web-platform-explainer/blob/main/advanced-attr-explainer.md

View on chromestatus.com