4

I have an anchor with a data-avatar url that points to an image and I want to add a block image to a.avatar::before to show the image.

a[data-avatar]::before {
    content: "";
    background: url( attr(data-avatar url) ) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 5px 0 0;
}

<a href="/username" data-avatar="http://some-url.com/image.png">my profile</a>

I cannot set the background image with url(attr(data-avatar))

Here is a fiddle if anyone wants to take a stab -- I am only interested in CSS-only way of doing this without extraneous markup.

http://jsfiddle.net/chovy/RDrxV/

chovy
  • 72,281
  • 52
  • 227
  • 295
  • According to [CSS Values and Units Module Level 3](http://www.w3.org/TR/css3-values/#attr), you could add a keyword to indicate the type of data. This way, you would get something like `url(attr(data-avatar url))`. However, I do not think this is supported very well (if at all). – ACJ Oct 10 '12 at 00:03
  • I tried both url and string as 2nd argument, neither worked. – chovy Oct 10 '12 at 00:08
  • Support is probably limited to nonexistent. It's a nice experiment, but if you want it to actually work, you should probably choose a different approach (or use some JavaScript on top of it that forces webbowsers to "get it"). – ACJ Oct 10 '12 at 00:13
  • Yeah, it's more of a challenge than a necessity. – chovy Oct 10 '12 at 00:52

2 Answers2

5

Sorry, as mentioned in the comments it is not possible with the current CSS2.1 implementation of attr() and url() to use an element's custom data attribute as an image URL in generated content.

It is not clear from Values and Units level 3 whether you can/should pass attr() as an argument to url() (or if the grammar even allows it):

background: url(attr(data-avatar)) no-repeat 0 0;

or just pass attr() itself and it'll generate a URL value (this is more likely given they have a distinct url type from the default string type):

background: attr(data-avatar url) no-repeat 0 0;

But either way, as of 2012 no browser in existence has yet implemented the new attr() function, so you won't be able to do this with pure CSS generated content. Hopefully browsers will start implementing it now that the module has entered CR, because it'd be a huge shame to see this feature dropped due to lack of interest.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • i believe it's a comma-separated list attr(data-avatar, url) -- but yes, it would be nice to be able to use data attributes in css. – chovy Oct 10 '12 at 05:06
  • @chovy: Doesn't seem so. The attribute name and type aren't separated by a comma, but what comes *after* that is comma-separated. It's strange why there's an inconsistency there... – BoltClock Oct 10 '12 at 05:34
  • Yeah you are right. MDN docs have it this way: https://developer.mozilla.org/en-US/docs/CSS/attr – chovy Oct 10 '12 at 18:15
  • It's also in the spec that I linked to. – BoltClock Oct 10 '12 at 18:21
  • I did some more research, and found bugs filed about this w/ mozilla. They won't fix, because it would be breaking the spec and thus require -moz-url() instead of url() to add support for attr(). I emailed w3c asking them to add it to spec. – chovy Oct 10 '12 at 21:16
0

It seems that you've forgotten to add a content property. If it is absent then conent is not generated:

http://www.w3.org/TR/CSS21/generate.html#content

Just set it to an empty string.

a[data-avatar]::before {
    content:"";
    background: url(attr(data-avatar)) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 5px 0 0;
}
gkond
  • 3,818
  • 2
  • 20
  • 27