Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using HTML attributes as CSS property values [duplicate]

Tags:

css

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?

like image 403
quadmachine Avatar asked Jun 20 '12 22:06

quadmachine


People also ask

Do HTML IDs have to be unique?

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.

Can an attribute be applied multiple times to the same element?

It is not valid to have the same attribute name twice in an element.

Are duplicate IDs allowed in HTML?

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 [...].


1 Answers

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.

like image 165
BoltClock Avatar answered Oct 21 '22 18:10

BoltClock