Why Doesn't CSS3's `attr()` Function Work as Expected in Major Browsers?

CSS3's attr() Function Not Supported in Major Browsers

In an HTML document:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

And in the CSS file:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Firefox displays a CSS error in Firebug. According to the W3C specifications, the attr() function should work, but it doesn't.

Why It Doesn't Work

The grammar specified in the spec requires the comma between the attribute name and the unit to be used to be dropped:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint color);
    box-shadow: inset 0 0 50px attr(data-tint color);
}

However, even with the correct syntax, the attr() function still won't work. As of 2020, there are no known implementations of the level 3 version of attr() in any major browser.

Where to Report Issues

If you'd like to see this feature implemented, you can suggest it in the relevant feedback channels:

• Microsoft Edge Platform (currently Under Consideration)

Note: The basic Level 2.1 version of the attr() function is fully supported across recent versions of all major browsers. However, it's used with the content property for the :before and :after pseudo-elements for generated content.

The above is the detailed content of Why Doesn't CSS3's `attr()` Function Work as Expected in Major Browsers?. For more information, please follow other related articles on the PHP Chinese website!