Why Does CSS3's `attr()` Function Fail in Modern Browsers?

CSS3's attr() Function Malfunctions in Major Browsers

Despite the W3C specifications claiming otherwise, Firefox users may encounter an error when attempting to utilize the attr() function.

Syntax Error:

The following CSS:

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

Will generate a syntax error in Firebug.

Reason for Failure:

After examining the CSS grammar, it becomes apparent that the comma between the attribute name and unit should be omitted:

.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 error persists.

Lack of Implementation:

Unfortunately, as of 2020, there are no known implementations of the Level 3 attr() function in any major browsers. Despite being at-risk, the feature remains in the editor's draft of the CSS specification.

Advocacy for Implementation:

Users who wish to see this feature implemented in the future can voice their support through relevant feedback channels. Current proposals include:

• Microsoft Edge Platform: Currently Under Consideration

Note:

The basic Level 2.1 version of attr() is widely supported and used with the content property for generated content.

The above is the detailed content of Why Does CSS3's `attr()` Function Fail in Modern Browsers?. For more information, please follow other related articles on the PHP Chinese website!