The spec says:
The attr() function returns the value of an attribute on the element for use as a value in a property. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element's originating element.
http://www.w3.org/TR/css3-values/#attr
However, this doesn't seem to work. When I use background-image: url(attr(href));
I get string "attr(href)" as attribute value, not the value itself.
http://jsfiddle.net/x2Rpt/1/
Any ideas why this is broken?
The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
It is not valid to have the same attribute name twice in an element.
It is illegal in any circumstances as per the specification: When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree [...].
It's not broken; it's just that no browser has implemented the CSS3 version of attr()
. Currently, implementations only exist for the one that was introduced in CSS2.1, which is limited to the content
property for generated and replaced content.
Your syntax seems correct otherwise, until and unless changes are made to the spec.
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