使用CSS attr（）设置宽度

Question

我正在尝试使用CSS中的attr（）设置元素的宽度，但是它不起作用。Chrome表示“无效的属性值”，但我不确定这是怎么回事。

我正在尝试使用属性“ prog”作为.progress div的百分比宽度。

<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 %);
}

Answer 1

这是CSS的实验性功能，至少是草案功能，根据Mozilla开发人员网络的文档，当前仅与CSS
content属性兼容（在该属性中，它可以返回要放置在伪元素内的字符串），但是不能（尚未）用于生成其他属性的值。

。