Современный CSS в 2026: новые возможности и приёмы

CSS в 2026 — это уже не просто «раскрасить страницу». Container Queries, слои @layer, селектор :has(), anchor positioning — это фундаментальные сдвиги, которые меняют подход к вёрстке. Поддержка новых возможностей — 96%+ во всех современных браузерах.

Container Queries

Раньше адаптивность считали от размера окна (@media). Container Queries позволяют адаптировать компонент под размер родителя. @container (min-width: 400px) { .card { flex-direction: row; } } — карточка перестраивается в зависимости от ширины контейнера, а не экрана. Идеально для переиспользуемых компонентов.

Селектор :has()

Долгожданный CSS-родительский селектор: .card:has(.badge) — стилизуем карточку, только если внутри есть бейдж. form:has(:invalid) — подсвечиваем форму с ошибками. .nav:has(.nav__link.active) — меню с активным пунктом. Без :has() это требовало JS.

Слои @layer

Управление каскадом: @layer base, components, utilities; — явный порядок без перебивания специфичностью. Сброс стилей → компоненты → утилиты. Каждый слой изолирован, specificity wars закончены.

Anchor Positioning

Привязка тултипов, попапов и дропдаунов к элементу без JS: position: absolute; position-anchor: --tooltip; top: anchor(--tooltip bottom);. Браузер сам рассчитывает позицию, автоматически подстраиваясь под viewport.

Другие новинки

Nesting: вложенность как в препроцессорах — нативная. @scope: изоляция стилей в пределах компонента. light-dark(): переключение темы одной функцией вместо двух наборов переменных. Scroll-driven animations: анимации по скроллу без Intersection Observer.

«CSS 2026 — это язык для сложных интерфейсов, а не просто презентационный слой. Container Queries и :has() — то, о чём мы мечтали 10 лет» — CSS Working Group.