Подтвердить что ты не робот

Установка ширины с помощью CSS attr()

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

Я пытаюсь использовать атрибут "prog" как ширину в процентах для div.progress.

Вот мой пример по 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 %);
}
4b9b3361

ОТВЕТЫ

Ответ 1

Это экспериментальная или, по крайней мере, черновик функции CSS и в настоящее время, согласно документации Mozilla Developer Network, совместима только с свойством CSS content (в котором она может возвращать строку, которая должна быть помещена внутри псевдоэлемент), но не может (пока) использоваться для генерации значений для других свойств.

Литература:

Ответ 2

Собственно, есть способ обойти решение attr():

Я не рекомендую это, но вы можете учитывать каждый сценарий атрибута data-width, например:

(код стилуса)

$limit = 300

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

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