#blog

Сегодня предлагаю посмотреть интересную статью о современном attr() в CSS

Ранее attr() поддерживал только текстовые значения, но новый синтаксис позволяет указывать тип данных: attr(data-color type(<color>)). Поддержка пока весьма ограничена, но скоро это должно добраться до baseline.

Примеры использования современного attr() из статьи:
1. Назначение номеров колонок, шаблонов областей и значений grid-gap в CSS Grid
2. Доступ к атрибуту rows в textarea: Умножение значения rows на определённое значение для установки минимальной высоты
3. Задержка анимации: Установка animation-delay на основе атрибута data-delay
4. Изменение цветовой тени
5. Фоновые изображения: Установка фонового изображения на основе атрибута data-bg
6. Прогресс-бар: Установка цвета и прогресса на основе атрибутов data-color и data-progress.

Мини-фреймворк на основе attr()
- Использование атрибутов для создания утилитных классов, например, px для установки горизонтальных отступов.

Почему стоит использовать современный attr() вместо инлайн-стилей?
1. Использование JavaScript: Доступ к атрибутам через dataset.
2. Разделение содержимого и стиля: Улучшение читаемости HTML.
3. Снижение конфликтов CSS: Предотвращение случайного переопределения стилей.


Статья - https://ishadeed.com/article/modern-attr/