CSS 2026: scroll-driven анимации в Baseline

Что произошло, почему это важно и что взять в работу.

Фронтенд-команды могут постепенно отказываться от JS-библиотек для скролл-анимаций и scrollspy. ключевые фичи дошли до Baseline, но с разной поддержкой в Firefox и Safari.

Если задача про сайт, SEO или автоматизацию , смотрите каталог услуг или форму нового клиента.

Скролл перестает быть JavaScript-обязательством

На странице, которая продает игру, скролл превратился в монтаж, тайминг, появление объектов, параллакс и подсветку меню. 13 лет между релизами GTA и GTA 6 дали студии время собрать такой сайт. В финальном выпуске What's !important этот пример всплывает как сигнал, что сложная скролл-механика перестала быть исключительной территорией JavaScript. Финальный выпуск What's !important на CSS-Tricks переезжает в рассылку, которая стартует 10 ноября после четырехлетнего перерыва.

Для владельца небольшого бизнеса это звучит скучно, пока не откроешь бюджет фронтенда. Библиотеки скролл-анимаций, scrollspy, наблюдатели, fallback-логика, тесты в браузерах. Все это стоит денег и времени. Теперь часть этой работы может уйти в CSS, но полная замена сегодня невозможна.

Что изменилось

Firefox 159 вывел scroll-driven animations в Baseline. Платформа позволяет избежать постоянной обвязки IntersectionObserver, requestAnimationFrame и ручного контроля прогресса скролла. Для лендинга, каталога, документации и маркетинговой страницы это уже экономия.

Параллельно Chrome 156 получил random(). Эта функция полезна для декоративной верстки, волнистых разделителей, вариативных фонов и мелких UI-эффектов. Brecht De Ruyte показал random() в эффектных демо. Но здесь начинается рыночная правда. У random() в Chrome 156 нет поддержки Firefox. У margin-trim из Chrome 155 тоже нет поддержки Firefox. text-decoration-skip-spaces не поддерживаются Firefox и Safari. :navigation-source нет в Safari и Firefox.

Firefox 158 добавил JPEG XL и CSS typed arithmetic в Baseline. Safari 27.1 получил набор CSS-фич для iPhone Duo. Mojtaba Seyedi показал, как собрать scrollspy на современном CSS. В том же выпуске есть инструменты для дизайн-систем, например контраст-чекер This hue shall pass от Clearleft и визуализатор градиентов Gradient Layers.

Is it just me or is anchor positioning the most versatile CSS feature right now?

Цитата про anchor positioning хорошо описывает настроение. Платформа за короткое время собрала столько новых возможностей, что команда начинает думать, какие сценарии можно закрыть CSS, а какие оставить в JS.

Где боль для SMB

Малый бизнес почти всегда покупает результат. Быстрый сайт, понятная навигация, эффект, который помогает продать, и отсутствие сюрпризов после обновления браузера. Scrollspy часто нужен там, где длинная страница услуг, FAQ, тарифы, оффер. Пользователь должен видеть, в каком блоке он находится. Раньше это делали JavaScript-библиотеки, потому что CSS не умел читать позицию на странице так, чтобы это было безопасно и кросс-браузерно.

Теперь у команды появляется другой разговор. Команда начинает думать, какие сценарии можно закрыть CSS, а какие оставить в JS. Это меняет код и коммуникацию с подрядчиком. Фронтенд-лист становится короче, а ответственность за баги распределяется понятнее.

Список, который стоит повесить в таск-трекер

• scroll-driven animations. Firefox 159, статус Baseline. Подходит для простых эффектов появления, привязки к скроллу, декоративных переходов.
• random(). Chrome 156, без поддержки Firefox. Полезен для декоративной верстки, но пока это не основа критичного UI.
• margin-trim. Chrome 155, без поддержки Firefox. Помогает с отступами в компонентах, но не для всего проекта.
• text-decoration-skip-spaces. Chrome 155, без поддержки Firefox и Safari. В основном косметика.
• :navigation-source. Chrome 156, без поддержки Safari и Firefox. Нишевая функция, но показывает, что браузеры бегут в разные стороны.
• Firefox 158. JPEG XL и CSS typed arithmetic в Baseline. Это меньше про маркетинг, больше про производительность и аккуратную верстку.
• Safari 27.1. Набор CSS-фич для iPhone Duo. Для SMB это напоминание, что Apple-экосистема живет своим релизным циклом.

Почему это не повод удалять JavaScript сегодня

Baseline не означает, что у всех пользователей одинаковый браузер. Он означает, что функция стала частью платформы, но поддержка в Firefox и Safari все еще разная. Если сайт компании живет в Safari на iPhone, Chrome на десктопе и Firefox у корпоративных пользователей, команда должна смотреть на покрытие. Новость тут вторична. Иначе получится классическая ошибка, красивая анимация в демо, пустой блок у пользователя.

В дайджесте отдельно отмечают, что сайт GTA 6 странно не работает в Firefox. Есть и другая ловушка. CSS-скролл хорош для эффектов, но не заменяет всю логику. Если scrollspy нужен для аналитики, глубины просмотра, динамических секций, lazy-загрузки или прав доступа, JavaScript остается. Бизнес-ставка в том, чтобы перестать платить JS-библиотекам за то, что платформа уже умеет.

Один рабочий шаг

Начните с аудита скролл-зависимостей. Возьмите текущий сайт и выпишите все блоки, которые реагируют на прокрутку, появление секций, подсветку меню, параллакс, волнистые разделители, sticky-эффекты. Разделите на три корзины. Первая, если это просто визуальный отклик, проверить на CSS scroll-driven animations и Baseline. Вторая, если это декоративная генерация, смотреть random() только там, где отсутствие Firefox не ломает смысл. Третья, если это бизнес-логика, аналитика или критичная навигация, оставить JavaScript.

Дальше нужен один участок. Полный рефакторинг сайта не требуется. Выберите лендинг услуги или страницу тарифов. Уберите там одну JS-зависимость и посмотрите на размер бандла, скорость загрузки, поведение в Firefox и Safari. Это даст цифру. Обещаний тут не нужно. Для владельца SMB цифра важнее хайпа.

Вердикт

CSS-скролл в 2026 году перестает быть экзотикой. Для фронтенд-команд это означает, что часть скролл-анимаций и scrollspy можно постепенно выводить из JavaScript. Но рынок не дает бесплатную замену библиотекам. Он дает новый слой поддержки, в котором Chrome, Firefox и Safari все еще идут разными дорожками.

Дальше в roadmap CSS уже маячат mesh-gradient(), freeform-gradient(), @mixin, @apply, ident() и псевдоселектор ::*. Это пока не отменяет текущую задачу. Оно показывает направление. Цена ошибки одна. Команда, которая удаляет JS без проверки браузеров, получает сломанный сайт. Команда, которая не смотрит на CSS, платит за то, что платформа уже делает дешевле.

Артём Волков, репортёр