8

The spec says:

The attr() function returns the value of an attribute on the element for use as a value in a property. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element's originating element.

http://www.w3.org/TR/css3-values/#attr

However, this doesn't seem to work. When I use background-image: url(attr(href)); I get string "attr(href)" as attribute value, not the value itself.

http://jsfiddle.net/x2Rpt/1/

Any ideas why this is broken?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
quadmachine
  • 232
  • 2
  • 7
  • Almost the same as this question asked earlier today: http://stackoverflow.com/questions/11117915/how-can-i-use-a-data-attribute-to-set-a-background-image-in-css – thirtydot Jun 20 '12 at 22:32
  • @thirtydot: I knew this seemed familiar... dunno if I should close it or leave my answer. – BoltClock Jun 20 '12 at 22:34
  • So basically, it should work, but it isn't implemented quite right? – quadmachine Jun 20 '12 at 22:39
  • The CSS3 version isn't implemented at all. The only available implementations are based on the CSS2.1 definition - http://www.w3.org/TR/CSS21/generate.html – BoltClock Jun 20 '12 at 22:40
  • @thirtydot: Well, here's the earliest question about CSS3's `attr()` that I can find: http://stackoverflow.com/questions/8769786/css3s-attr-doesnt-work-in-major-browsers It's not easy to search without having to wade through thousands of jQuery questions... – BoltClock Jun 20 '12 at 23:16
  • @BoltClock: So I should link to that one in the future as it's the closest thing to a canonical answer? – thirtydot Jun 20 '12 at 23:37
  • @thirtydot: I suppose so. VTC the rest if you'd like and I'll clean up the comments. – BoltClock Jun 20 '12 at 23:41

1 Answers1

15

It's not broken; it's just that no browser has implemented the CSS3 version of attr(). Currently, implementations only exist for the one that was introduced in CSS2.1, which is limited to the content property for generated and replaced content.

Your syntax seems correct otherwise, until and unless changes are made to the spec.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    please up-vote this bug to get them work on implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=435426 – vsync Jun 25 '13 at 13:20