attr() + container style queries вместе
Перетащи карточку в другой контейнер — и она сама пересчитывает свои размеры — padding, аватар, шрифты, всё — без ни строчки JS-стилизации. Только перемещение DOM-узла.
Брехт Де Руйте соединил две CSS-фичи, которые наконец-то по-настоящему решают проблему «компонент должен знать свой контекст»: типизированный attr() и container style queries.
attr() раньше работал только внутри content на псевдоэлементах, и только со строками. CSS Values and Units Module Level 5 открывает его для любого свойства, с реальными типами:
→ attr(data-repeat type(), 3) — читает HTML-атрибут как число, напрямую в repeat() для грида → attr(data-minSize type(), 280px) — парсит реальную длину с единицей для minmax() → attr(data-density type(), comfortable) — самое важное. Возвращает неквотированный идентификатор, а не строку. Это важно, потому что style queries сравнивают именно идентификаторы, а не строки — "compact" никогда не совпадёт с @container style(--density: compact), а compact без кавычек — совпадёт
Container style queries читают этот идентификатор из custom property родителя — и вот момент, который многие пропускают: **container-type для запроса custom properties не нужен.** Любой предок автоматически подходит — ребёнок просто идёт вверх по дереву в поисках этого свойства.
Вместе HTML-атрибут становится единственным источником правды для внешнего вида компонента, где бы он ни находился в DOM:
\\html
\\ \\css .card-container { --density: attr(data-density type(), comfortable); } @container style(--density: compact) { .card { --density-scale: 0.72; } } \\
Демо с drag-and-drop — главный эффект: нативные drag-обработчики перемещают карточку между контейнерами — это весь JS. Браузер переоценивает дерево контейнеров, карточка попадает под другой style query и пересчитывается — padding, аватар, титул, бейдж, кнопки двигаются вместе от одного множителя --density-scale, поэтому ничего не смотрится сплющенным ни при какой плотности.
Поддержка: container style queries для custom properties работают везде. Типизированный attr() вышел в Chrome/Edge 133 (февраль 2025) и Firefox 155 (в прошлом месяце) — в Safari только в Technology Preview, ещё не в стабильной версии.
Полный разбор с 4 живыми CodePen демо у Brecht De Ruyte 👇 https://utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css/
