BLOG

CSS 2026: язык наконец поглощает JavaScript

CSS 2026: язык наконец поглощает JavaScript

Есть паттерн который повторяется в истории веб-разработки: JavaScript решает проблему, сообщество принимает решение, потом браузеры внедряют это нативно — и JavaScript-код становится лишним. Так было с роутингом, с кастомными элементами, с CSS-переменными.

В 2026 году этот процесс идёт сразу по нескольким направлениям одновременно. CSS забирает тултипы, дропдауны, анимации, masonry-сетки и условную логику — без единой строки JS.

Anchor Positioning: конец эпохи Popper.js

Сколько раз ты ставил Floating UI или Popper.js только для того чтобы тултип не уходил за край viewport? Это заканчивается.

CSS Anchor Positioning позволяет привязать один элемент к другому напрямую в CSS — браузер сам отслеживает позицию:

.button {
  anchor-name: --trigger;
}
 
.tooltip {
  position: absolute;
  position-anchor: --trigger;
  position-area: top;
  position-try-fallbacks: flip-block, flip-inline;
}

Последняя строка — ключевая. position-try-fallbacks означает что если тултипу не хватает места сверху, браузер автоматически перевернёт его вниз или в сторону. Это та самая логика которую раньше реализовывали библиотеки.

Поддержка: Chrome, Edge, Safari — уже в продакшене. Firefox — в активной разработке.

Anchor Positioning — это не просто удобство. Это удаление целого класса зависимостей из проекта.

Grid Lanes: нативный masonry без JavaScript

Макет в стиле Pinterest — карточки разной высоты которые заполняют пространство оптимально — всегда требовал либо JS-библиотеку, либо мультиколоночный трюк с column-count. Оба варианта имели ограничения.

После пятилетней дискуссии между браузерами CSS Working Group выбрал синтаксис Apple:

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Элементы автоматически заполняют доступные ячейки по высоте. Никакого JavaScript для позиционирования. Никаких layout-сдвигов.

Поддержка: Safari реализовал первым. Chrome и Firefox — в разработке.

Scroll-driven анимации: прощай, IntersectionObserver

Анимации при скролле, индикаторы прогресса чтения, появление элементов при входе во viewport — всё это требовало JavaScript-обработчиков scroll-событий. Дорого по производительности, сложно поддерживать.

Теперь скролл — это нативный animation-timeline:

/* Прогресс-бар чтения */
.progress {
  animation: grow linear;
  animation-timeline: scroll();
}
 
/* Появление при входе во viewport */
.card {
  animation: fade-in-slide 0.5s;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
 
@keyframes fade-in-slide {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

Первый пример привязывает анимацию к позиции скролла страницы. Второй запускает анимацию когда элемент входит во viewport — аналог IntersectionObserver, но в CSS.

Поддержка: Chrome, Edge, Safari. Firefox — в финальной стадии.

sibling-index(): смерть index-пропсов в React

Классическая задача: анимировать список карточек с нарастающей задержкой. Раньше — передавать index через пропсы и добавлять animation-delay инлайново:

// Было
{items.map((item, index) => (
  <Card key={item.id} style={{'--index': index}} />
))}

Теперь браузер знает позицию элемента среди сиблингов:

/* Стало */
.card {
  animation-delay: calc(80ms * sibling-index());
}

Никаких пропсов, никаких инлайн-стилей. Добавь или убери карточку — задержки пересчитаются автоматически.

CSS if(): логика прямо в стилях

Самая неожиданная новинка — if() внутри CSS-значений:

.button {
  transition-duration: if(
    media(prefers-reduced-motion: reduce): 0ms;
    else: 180ms
  );
}

Это не @media блок — это условие внутри значения свойства. Синтаксис работает с медиа-запросами, container queries и кастомными свойствами. Для дизайн-систем это меняет многое: меньше классов-модификаторов, меньше JavaScript для переключения состояний.

Поддержка: ранние стадии, но уже в спеке.

Interop 2026: браузеры договорились

Важный контекст: в 2026 году все три движка — Blink (Chrome/Edge), WebKit (Safari) и Mozilla (Firefox) — официально присоединились к инициативе Interop 2026. Это означает скоординированную работу над совместимостью именно тех фич которые описаны выше: Anchor Positioning, CSS Grid Lanes, scroll-driven анимации.

Это не просто анонс. Это конкретные обязательства с дашбордом прогресса.

Тема этого года одна: CSS поглощает UI-логику которая никогда не должна была жить в JavaScript. Позиционирование, анимации при скролле, stagger-эффекты, условное поведение — браузер теперь справляется сам.

Меньше зависимостей. Быстрее производительность. Чище архитектура.

5

14.03.2026

|

blog.logrocket.com
2026