h1fra h1fra - 2 months ago 12
CSS Question

Css Content, Attr and Url in the same sentence

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? :)

Answer

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.