20

I have used the content attribute for a long time, and today I wanted to try something new. Instead of using JS to display a image tooltip I wanted to know if it was possible to do it dynamically with CSS.

So I tried:

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

where attr(id) is supposed to return the ID of the picture (alphanumeric) which is also the name of the picture.

It doesn't work at all, it has no effect. I think that the block did not parse because adding a border or background to the block also seems to have no effect.

When I just use the attr(id) alone, without the url thing, it works perfectly. It also works when I replace attr(id) with the real name of the picture.

After searching a while on the web I haven't found anything relevant so here I am. Is that a known bug or just my mistake? :)

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
h1fra
  • 324
  • 1
  • 3
  • 10

2 Answers2

21

It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

I.e.:

  • The literal normal, none or inherit

  • Or any number of these in succession:

    • a string - "hello"
    • a (constant) URI - url("image.jpg")
    • a counter - counter(section)
    • an attribute - attr(id)
    • open-quote, close-quote, no-open-quote, no-close-quote

The specs don't allow for them to be "nested", they can only follow each other, e.g.:

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.

MPaul
  • 2,553
  • 3
  • 20
  • 34
JimmiTh
  • 7,389
  • 3
  • 34
  • 50
  • 3
    Ah well, that's explain everything :/ Bit of shame that it's not in discussion, could be awesome to replace JS with css for that kind of thing! thanks :) – h1fra Feb 12 '12 at 00:47
14

As of W3C Candidate Recommendation 28 August 2012, there is syntax for specifying the type returned by attr().

It is described here.

Long story short, the following would work:

content: attr(id url);

But it still doesn't seem like you would be able to concatenate that with other strings, which is annoying.

Anyhow, this still doesn't seem to be implemented anywhere.

Check Browser compatibility

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
Joe Thomas
  • 141
  • 1
  • 2
  • 6
    attr is basically the red-headed stepchild of the css world. It is capable of so much power, but no one is will to allow it to do so. :( – Kevin Peno Sep 10 '13 at 18:49