Is CSS3's `attr()` Function a Myth? A Look at Browser Compatibility and Implementation.

CSS3's attr() Function: A Mirage in Major Browsers

Many developers have encountered difficulties using the CSS3 attr() function, particularly in Firefox. Despite its inclusion in the W3C specifications, it remains an unimplemented feature.

Syntax and Example

The syntax for the attr() function is as follows:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )</fallback></type-or-unit></attr-name>

For example, the following CSS code attempts to set the border color and box shadow of an element based on the value of the data-tint attribute:

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

Why It Doesn't Work

Despite meeting the requirements of the specification, this code fails to work because the Level 3 version of attr(), which introduced the ability to specify type or unit, is not implemented in any major browser.

Current Implementation Status

As of 2020, there are no known implementations of the Level 3 attr() function. It is still at risk in the latest editor's draft of the specification.

Browser Support

The Level 2.1 version of attr(), which is used with the content property for generated content, is fully supported in all major browsers. The MDN browser compatibility table only applies to this version, not the Level 3 version.

Call to Action

Developers who wish to see the Level 3 attr() function implemented can provide feedback through the following channels:

• Microsoft Edge Platform: Currently Under Consideration (Thanks to Lea Verou!)

The above is the detailed content of Is CSS3's `attr()` Function a Myth? A Look at Browser Compatibility and Implementation.. For more information, please follow other related articles on the PHP Chinese website!