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 trying to use the attribute "prog" as the width in percent for the .progress div.

Here's my example on codepen.

<div class="progresscontainer">
    <div class="progress" prog="10">
    </div>
</div>

.progresscontainer {
    position:absolute;
    background-color:black;
    width:500px;
    height:100px;
    border-radius:5px;
    border:1px solid black;
    overflow:hidden;
}
.progress {
    background-color: green;
    background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    position:absolute;
    height:100%;
    width: attr(prog %);
}

question from:https://stackoverflow.com/questions/18408488/setting-width-with-css-attr

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).