What is the correct usage of CSS attr function?

Question

Since this function is implemented in IE8, I wanted to see exactly what I could do with it, but I'm having trouble getting it to work anywhere other than the :before and :after css pseudo-elements. Should the following be allowed?

span[color] { color: attr(color); }

I tried it in Google Chrome too, but it didn't work. Also, what about more dynamic things like:

input[value=attr(default)] { color: gray; }

Answer 1

In CSS 2.1 (which is what should be used these days) the attr function is a little limited in what it can do. The only place where it can appear is in a content property on :before and :after pseudo-elements. So its sole purpose is generated content.

In CSS 3 this changed a bit, in that attr() may return other types than only strings and it can be used for other properties as well.

But bear in mind that most of CSS 3 is still a Working Draft with very few features (not including Values and Units) being a Candidate Recommendation. Support by User Agents for CSS 3 features varies currently between limited and next to non-existent. Mostly browser vendors seem to fight boredom by implementing "cool stuff" like rounded borders, text shadow, etc. which doesn't mean much work supporting it. But what you were looking at here is definitely beyond that and the WD status won't change in the near future. So don't expect it to be implemented anywhere.