Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
Передавай простые значения из HTML прямо в CSS!
Раньше attr() практически ассоциировался только с content. Расширенный синтаксис умеет читать атрибут как конкретный CSS-тип и использовать результат в обычных свойствах.
Например, прогресс можно хранить прямо в разметке:
<div class="progress" data-value="72"></div>
А ширину вычислить без style="width: 72% и без JS:
.progress {
width: calc(attr(data-value type(<number>)) * 1%);
}
То же самое работает с типизированными значениями. Например, компонент может получить цвет из data-*:
.badge {
background: attr(data-color type(<color>), gray);
}
Это удобно для серверного рендера и компонентов, где данные уже находятся в DOM, тк не нужно дублировать их в inline-style или генерировать отдельные классы.
Но пока расширенный attr() для произвольных свойств и type() ещё имеет неполную поддержку браузерами.
🔥 По сути, data-* теперь может быть небольшим типизированным API между разметкой и CSS.
📣 Code Ready | #совет
33 · 1.7K ·