CSS 2026: scroll-driven анимации в Baseline: на практике

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

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

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

Скролл-магия упирается в Firefox даже у сайта GTA 6

Сайт GTA 6 построен на эффектной прокрутке, но в Firefox он не работает. Это наблюдение хорошо ложится на обычную SMB-реальность. Даже у сайта крупного продукта браузер остаётся местом, где интерфейс может обрываться. Для владельца интернет-магазина, лендинга, сервиса записи или корпоративного сайта смысл тот же. Красивая страница не равна работающей странице, если одна из платформ показывает пустоту.

Хорошая новость для фронтенд-команды появилась в CSS. Firefox 159 довел scroll-driven animations до Baseline. Chrome 156 принес random(). Chrome 155 дал margin-trim. Safari 27.1 получил набор CSS-фич. Это не отменяет проверки на реальных устройствах. Но часть скролл-эффектов и scrollspy теперь можно постепенно переносить из JS-библиотек в стандартный CSS.

За что платит владелец сайта

Если у вас интернет-магазин, лендинг, сервис записи, корпоративный сайт или продукт с длинными страницами, скролл-навигация напрямую связана с конверсией. Человек листает страницу, хочет вернуться к тарифам, контактам, форме, разделу с отзывами. Активный пункт меню помогает не потеряться. Если этот пункт ломается, пользователь не всегда видит причину в коде. Он видит, что сайт неудобный, и уходит.

Боль здесь лежит в эксплуатации. JS-библиотека для scrollspy или скролл-анимации часто тянет за собой обработчики событий, перерисовку, зависимость от чужого обновления, тесты на старых Android, проверки в Safari, ручную настройку под разные экраны. Команда тратит время на то, что в идеале должно быть дешевле и стабильнее.

Для владельца SMB это превращается в три расхода. Первый, оплата разработки. Второй, оплата поддержки. Третий, скрытый простой, когда подрядчик не может быстро объяснить, почему на iPhone эффект выглядит иначе.

Как устроена новая механика

Baseline означает, что фича перестала быть экспериментом и может считаться общим фундаментом для веб-платформы. Но общий фундамент не обещает, что каждая версия Safari и Firefox уже поддерживает всё одинаково. В свежем CSS-дайджесте видно, как релизы расходятся. Firefox 159 довел scroll-driven animations до Baseline. Chrome 156 добавил random(), но в Firefox этой поддержки пока нет. Chrome 155 дал margin-trim, тоже без Firefox. Safari 27.1 принес набор CSS-фич для iPhone Duo. Отдельно в Chrome 156 появился navigation-source, но без Safari и Firefox.

Для скролл-анимаций это меняет практику. Раньше команда писала JS, потому что иначе нельзя было получить предсказуемый эффект на прокрутке. Теперь базовые состояния можно пробовать описывать через CSS. Это уменьшает количество обработчиков событий и упрощает отладку. Но scrollspy и сложные эффекты всё равно требуют проверки. Если интерфейс зависит от navigation-source, это пока не универсальная замена привычной навигации.

random() открывает декоративные состояния без JS. Можно делать вариативные фоновые фигуры, случайные отклонения, легкую неровность интерфейса. Это не заменяет анимацию. Но часть JS-костылей убирает. margin-trim полезен для чистоты отступов. navigation-source интересен для навигации. scroll-driven animations ближе всего к массовому применению, потому что скролл есть почти на каждой странице.

Факт и смысл

• Firefox 159. Scroll-driven animations получили статус Baseline. Это значит, что базовые эффекты на прокрутке можно пробовать держать в CSS. Отдельная JS-библиотека становится менее нужной.
• Chrome 156. Появилась random(). Это значит, что декоративные случайные состояния можно делать без JS. Но уверенной поддержки в Firefox пока нет.
• Chrome 155. Появился margin-trim. Это значит, что чистка отступов стала ближе к стандарту. Но общей для всех браузеров она пока не стала.
• Safari 27.1. Пришел набор CSS-фич для iPhone Duo. Это значит, что Apple добавляет новые возможности своим графиком. Тесты на iPhone остаются обязательными.
• Chrome 156. Появился navigation-source. Это значит, что навигационные подсказки можно изучать. Но надежной заменой scrollspy во всех браузерах эта фича пока не выглядит.

Цена ошибки

Ошибка здесь стоит дорого. Если собрать лендинг на фиче, которой нет в Safari, владелец получит страницу, которая на iPhone выглядит сломанной. Если навигация строится на navigation-source без fallback, активный раздел может перестать подсвечиваться. Если random() используется как обязательная часть интерфейса, Firefox может показать пустое место вместо ожидаемой вариативности.

Плохой сценарий выглядит иначе. Команда выбрала красивое решение без карты поддержки. Владелец в итоге платит за срочный фикс, за повторный дизайн, за потерянные заявки. На длинных страницах это особенно заметно. Человек не доходит до формы, если не понимает, где он находится.

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

Сделайте ревизию одной страницы. Возьмите лендинг, карточку товара, страницу тарифов или раздел с длинным контентом, где уже есть scrollspy или анимация на прокрутке. Попросите фронтенд-команду ответить на три вопроса. Что сейчас работает на JS. Что можно перенести в CSS без потери интерфейса. Что должно остаться в JS как fallback для Safari и Firefox.

Затем зафиксируйте результат в коротком чек-листе для команды. Браузеры, версии, поведение на iPhone, поведение на Android, поведение при отключенном JS. Не нужно сразу переписывать весь сайт. Достаточно понять, какие скролл-эффекты уже можно делать дешевле, а какие пока нельзя трогать.

Послевкусие

CSS догоняет JS там, где раньше все решала библиотека. Но бизнесу все равно нужен тест на Safari и Firefox. Хорошая новость в том, что часть поддержки теперь можно закладывать в стандарт. Плохая новость в том, что стандарт не отменяет проверку реальных устройств.

Для владельца SMB это значит одно. Фронтенд становится чуть дешевле и чуть предсказуемее. Но только если команда смотрит на поддержку в браузерах. Заголовок релиза сам по себе ничего не гарантирует. Scroll-driven animations в Baseline это не финиш. Это разрешение начать переносить простые эффекты из JS в CSS.