Đặt chiều rộng bằng CSS attr()

Question

Tôi đang cố gắng đặt chiều rộng của phần tử bằng cách sử dụng attr() trong CSS nhưng không hoạt động. Chrome nói "giá trị thuộc tính không hợp lệ" nhưng tôi không chắc chắn có gì sai.

Tôi đang cố gắng sử dụng thuộc tính "prog" làm chiều rộng tính bằng phần trăm cho div .progress.

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

Đây là một thử nghiệm, hoặc ít nhất là dự thảo, tính năng của CSS, và hiện nay, theo tài liệu Mozilla Developer Network, chỉ tương thích với thuộc tính CSS content (trong đó nó có thể trở lại một chuỗi được đặt bên trong một phần tử giả), nhưng không thể (chưa) được sử dụng để tạo ra các giá trị cho các thuộc tính khác.

Tài liệu tham khảo:

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

Answer 2

Support for attributes other than content is Experimental. Nói cách khác, các trình duyệt không hỗ trợ điều này mặc dù nó có vẻ hợp lệ.

Here is an example cho biết rằng nó hoạt động với content, nhưng không phải width.

Answer 3

Trên thực tế, có một cách để có được xung quanh các giải pháp attr():

Tôi không đề nghị này, nhưng bạn có thể giải thích cho mỗi kịch bản của data-width thuộc tính, ví dụ:

(bút stylus đang)

$limit = 300 

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

mặc dù, đây là một cách tiếp cận khủng khiếp, và dẫn đến cách quá nhiều CSS. Tôi chỉ muốn chỉ ra rằng luôn luôn có một cách.