Menu
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? :)
525
While attr() is supported for effectively all browsers for the content property, CSS Values and Units Level 5 adds the ability to use attr() on any CSS property, and to use it for non-string values (e.g. numbers, colors).
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
It can be displayed using either the counter() or counters() function. The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element.
The content property in CSS defines the content of an element. You may have heard that this property only applies to the ::before and ::after pseudo-elements. In this article, we'll explore various use cases for the content property, including outside of pseudo-elements.
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:
"hello"
url("image.jpg")
counter(section)
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.
166
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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
