Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 29 сентября 2026 г.
Как связать HTML-атрибуты с адаптивными компонентами в CSS — 29 сентября 2026 г. в 11:09:07.435
Как связать HTML-атрибуты с адаптивными компонентами в CSS Расширенный attr() читает data-атрибут как число, длину или CSS-идентификатор. Поэтому data-repeat=4 можно передать в repeat(), а data-gap=2 превратить в 2cqi, то есть отступ в единицах ширины контейнера. Отдельные классы под каждое значение не нужны. Запросы по стилю контейнера добавляют контекст: карточка проверяет вычисленное CSS-свойство ближайшего предка, например --density: compact, и меняет отступы, размер аватара и видимость описания. Для такого запроса container-type не нужен. В разборе utilitybend оба механизма соединены в сетке и переключателе плотности. Демо намеренно оставлены без @supports и запасных стилей: перед продакшеном проверьте поддержку и добавьте запасной вариант.