Setting width with CSS attr()

Question

I\'m trying to set the width of an element using attr() in CSS but it\'s not working. Chrome says \"invalid property value\" but I\'m not sure what\'s wrong.

I\'m tr

Answer 1

This is an experimental, or at least draft, feature of CSS, and currently, according to Mozilla Developer Network's documentation, is only compatible with the CSS content property (in which it can return a string to be placed inside a pseudo-element), but cannot (yet) be used to generate values for other properties.

References:

• attr() (at MDN).
• attr() (at W3C).

Answer 2

Actually, there is a way to get around the attr() solution:

I don't recommend this, but you could account for every scenario of data-width attribute, for example:

(stylus code)

$limit = 300

.myClass
    for num in (1...$limit)
        &[data-width="${limit}"]
            width $limit

Albeit, this is a terrible approach, and leads to way too much CSS. I just wanted to point out that there's always a way.

Answer 3

Support for attributes other than content is Experimental. In other words, browsers do not support this yet even though it is seemingly valid.

Here is an example showing that it does work with content, but not width.