CSS3's attr() doesn't work in major browsers

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.

Answer 2

As of today, the attr() in CSS3 only supports to get values from the HTML5 data attribute to set the content of an element. There is a nice fiddle whichs shows it.

I have tested it in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11.

If you want to use HTML5 data attributes for different things in CSS3, like setting the width and the height of elements, then you need an additional JavaScript library.

Fabrice Weinberg wrote a CSS3 attr() Polyfill which handles data-width and data-height. You can find Fabrice's GitHub repository here: cssattr.js.

Answer 3

I found hack. This is not attribute, but manipulate directly on styles. In Chrome Canary, you can use custom css properties, and JS for manipulate properties.

In CSS:

.some { background-position: var(--x) 0; } 

In JS:

element.style.setProperty("--x", "100px", "");
//With same success you can set attribute. 

Test case: https://jsfiddle.net/y0oer8dk/

Firefox: https://jsfiddle.net/0ysxxmj9/2/

Answer 4

It does work, but not the way you think. It's not a value that's sent via a variable but more as a trigger to then assign a value to. And because of this it's better to make the data attributes something unique but simple. A small example might help:

<div class="data"><span data-width="80" data-tint="lime"></span></div>

Then in your css you would put:

.data {height: 50px; width: 100%; background-color: #eee;}
.data > span {display: block; height: 100%;}
.data > span[data-width="80"] {width: 80%;}
.data > span[data-tint="lime"] {background-color: rgba(118, 255, 3, 0.6);}

It's pointless if your doing it on a small scale but on a larger scale and with some help from SCSS some things become easier, like..

@for $i from 1 through 100 {
    &[data-width="#{$i}"] {
        .data > span {
            width: calc(#{$i} * 1%);
        }
    }
}

That will compile into CSS every percentage possibility allowing you to set your span width with data-width.

Check out the fiddle

Answer 5

What you are attempting to accomplish can't currently be achieved with data attributes as has been said by several people already. While the answer from @Eugene will work, it will add an incredible amount of bloat to your css file and is therefore unreasonable. @benny-neugebauer was correct in saying that it isn't possible with data attributes but he isn't entirely correct in saying that you need javascript to accomplish it. There is a way to achieve it with html and css only...

We need to start by converting your attribute from a data attribute to a css variable.

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

becomes

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

Next, we need to modify your css slightly. It should also be noted that since you used a comma in your attr(), where you have color is where you are supposed to, or can, include a fallback in case your variable is invalid. If you wanted to declare that the attribute value should be a color then you would not use the comma.

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

becomes

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

You can see it in action below.

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

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

Here is an article by Chris Coyier at css-tricks.com that provides more information.