Question

I have this in my 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 this 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 returns a CSS error in Firebug. Am I doing something wrong?

According to the W3C specs for the attr() function, it should work.

(Also, there’s a page about attr() in the MDN Wiki, so I assume it should at least work in Firefox)

Answer 1

Looking at the grammar that’s given in the spec:

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

It looks like the comma between the attribute name and the unit to be used needs 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 if you have the right syntax, it won’t work either. It turns out, there are no known implementations of the level 3 version of attr() as of 2012…2020. To make matters worse, it’s still at-risk as of the latest editor’s draft of the spec.

But not all is lost: if you’d like to see this feature implemented in upcoming browsers, there is still time to suggest it in the relevant feedback channels! Here are the proposals that have been put out so far:

• Microsoft Edge Platform, currently Under Consideration (ht Lea Verou!)

For the record, the basic Level 2.1 version is fully supported across recent versions of all major browsers, including IE8+ and Firefox 2+, and is used with the content property for the :before and :after pseudo-elements for generated content. The MDN browser compatibility table is applicable only to this version, and not the CSS3 version.