Настройка ширины с CSS attr()

Question

Я пытаюсь установить ширину элемента с помощью attr() в CSS, но он не работает. Chrome говорит «недопустимое значение свойства», но я не уверен, что случилось.

Я пытаюсь использовать атрибут «prog» как ширину в процентах для 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

Это экспериментальная или, по крайней мере, проект, особенность CSS, и в настоящее время, в соответствии с документацией Mozilla Developer Network, является совместимым только с помощью свойства 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 

Albeit, это ужасный подход и приводит к пути слишком много CSS. Я просто хотел указать, что всегда есть способ.