用CSS設置寬度attr（）

Question

我想在CSS中使用attr（）設置元素的寬度，但它不工作。鉻說「無效的財產價值」，但我不知道什麼是錯的。

我正在嘗試使用屬性「prog」作爲.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 %); 
} 

Answer 1

這是一個實驗，或至少草案，CSS的特點，目前，據Mozilla開發者網絡的文檔，只與CSS content屬性兼容（其中它可以返回一個要放置在僞元素內的字符串），但不能用於（還）用於爲其他屬性生成值。

參考文獻：

• attr() (at MDN)。
• attr() (at W3C)。

Answer 2

Support for attributes other than content is Experimental。換句話說，瀏覽器即使看起來有效，也不支持這一點。

Here is an example顯示它與content一起使用，但不是width。

Answer 3

其實，有一種方法可以繞過attr()解決：

我不建議這樣做，但你可以考慮data-width屬性的每一個場景，例如：

（手寫筆代碼）

$limit = 300 

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

雖然，這是一個可怕的做法，並導致方式太多CSS。我只想指出，總有一種方法。