Css Content, Attr and Url in the same sentence

Question

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 wa

Answer 1

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

Answer 2

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.