Тренды CSS 2026: от Anchor Positioning до декларативных маршрутов и декораторов промежутков

Тренды CSS 2026: от Anchor Positioning до декларативных маршрутов и декораторов промежутков

Современный CSS переживает один из наиболее интенсивных этапов развития в истории веб-разработки. Задачи, которые раньше требовали подключений сторонних скриптов JavaScript, тяжелых библиотек вычисления позиций элементов или сложных манипуляций с DOM-деревом, сегодня решаются нативными декларативными средствами браузерных движков.

Публикация результатов ежегодного исследования State of CSS 2026 и релизы новых версий браузеров Chrome 149 и Edge 149 наглядно демонстрируют смещение центра тяжести фронтенд-архитектуры в сторону возможностей современного CSS.

Результаты исследования State of CSS 2026: ожидания и реальность

Опрос State of CSS 2026 выявил характерный разрыв между интересом верстальщиков к новым спецификациям и их реальным внедрением в продакшен.

Главные выводы исследования:

• Самая ожидаемая фича — Anchor Positioning: Спецификация привязки всплывающих элементов стала абсолютным лидером по уровню интереса разработчиков. Однако показатель ее регулярного использования в коммерческих проектах пока остается невысоким из-за неравномерной поддержки браузерными движками (особенно в Safari).
• Массовое признание псевдокласса (): Родительский селектор :has() окончательно перешел из категории экспериментальных возможностей в базовый инструментарий фронтендера. Процент его применения в продакшене превысил 85%.
• Нативная вложенность (CSS Nesting): Синтаксис вложенных правил без применения препроцессоров (SASS/LESS) стал стандартом по умолчанию во всех крупных веб-приложениях.

Anchor Positioning: нативное позиционирование элементов

Спецификация CSS Anchor Positioning решает давнюю проблему веб-верстки — привязку позиционируемого элемента (тултипа, выпадающего меню, всплывающей подсказки, контекстного меню) к элементу-якорю на странице при скролле и изменении размеров окна.

Раньше для этого применялись тяжелые JS-библиотеки (Popper.js, Floating UI), вычислявшие координаты через getBoundingClientRect() в основном потоке браузера.

Теперь позиционирование описывается декларативно через связку свойств:

/* Элемент-якорь */
.anchor-element {
  anchor-name: --my-anchor;
}

/* Всплывающий элемент */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block, flip-inline;
}

Благодаря правилу @position-try браузер автоматически пересчитывает координаты и переносит тултип вверх или вбок, если он выходит за пределы видимой области экрана (viewport), выполняя расчеты непосредственно в потоке компоновки без задержек.

Кроме функции anchor(), спецификация поддерживает функция anchor-size(), позволяющую автоматически задавать ширину или высоту всплывающего меню равной размерам привязанного кнопки-якоря:

.dropdown-menu {
  width: anchor-size(--my-anchor width);
}

Стандарты в продакшене: родительский селектор () и вложенность

Псевдокласс :has() произвел революцию в стилизации документов. Он позволяет селектору выбирать родительский элемент на основе состояния или наличия дочерних элементов, устраняя необходимость добавлять технические CSS-классы через JavaScript.

Практические сценарии применения:

• Стилизация карточки при наличии изображения:

.card:has(img) {
  grid-template-columns: 200px 1fr;
}

• Управление состоянием формы при ошибке валидации:

.form-group:has(input:invalid) {
  border-color: var(--error-color);
}

В сочетании с нативной вложенностью CSS Nesting разработчики получают лаконичные и легко читаемые таблицы стилей без оверхеда сборщиков.

Новые возможности Chrome 149 и Edge 149: gap decorations

Свежие релизы браузеров Chrome 149 и Edge 149 принесли долгожданное новшество — нативное оформление промежутков между элементами сетки (gap decorations).

Раньше для отрисовки разделительных линий между колонками или строками в Grid/Flexbox приходилось вставлять пустые <div>-разделители либо использовать хрупкие хаки с отрицательными отступами и свойствами border.

Спецификация gap decorations вводит нативные свойства для декорации разделителей:

• column-rule: задает цвет, стиль и толщину вертикльных линий между колонками Grid или Flexbox.
• row-rule: задает параметры горизонтальных разделителей между строками.
• gap-rule: сокращенная запись для однотипной стилизации всех разделительных линий в сетке.

Пример использования:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Нативные линии-разделители */
  column-rule: 1px solid var(--border-color);
  row-rule: 1px dashed var(--subtle-divider);
}

Декоративные линии отрисовываются браузером на этапе графического сплиттинга без создания дополнительных узлов в DOM-дереве.

Декларативная маршрутизация и единицы измерения lh

Среди других ключевых новшеств стандартов выделяются:

1. Декларативный роутинг через View Transitions: Новые параметры View Transitions API позволяют настраивать плавные переходы между страницами приложения без написания JS-скриптов:

@view-transition {
  navigation: auto;
}

Браузер автоматически анимирует общий контент (например, обложку товара или заголовок) при переходе по ссылке.

2. Единица измерения lh (line-height): Относительная единица lh привязана к вычисленному значению высоты строки элемента. Это позволяет задавать вертикальные отступы и размеры иконок точно пропорционально тексту:

.icon {
  height: 1lh;
  width: 1lh;
}

3. Свойство overflow: clip для изображений: Использование overflow: clip на элементах <img> обеспечивает безопасное кадрирование контента без создания контекста прокрутки (scroll container), предотвращая случайные скроллбары и снижая расход памяти.

Рекомендации по прогрессивному ухудшению (Progressive Enhancement)

Поскольку поддержка спецификации Anchor Positioning в браузере Safari еще не достигла 100% покрытия, в проектах рекомендуется использовать подход прогрессивного улучшения с проверкой поддержки свойств через директиву @supports:

@supports (anchor-name: --test) {
  .tooltip {
    position-anchor: --my-anchor;
    top: anchor(bottom);
  }
}

@supports not (anchor-name: --test) {
  /* Запасной вариант с традиционным JS позиционированием */
  .tooltip {
    top: var(--fallback-top);
  }
}

Развитие современных веб-стандартов позволяет сократить количество стороннего JavaScript-кода в проектах, ускорить загрузку страниц и сделать верстку приложений устойчивой к изменениям браузерного окружения.