Firefox 159: нативные анимации по скроллу и изолированные реестры веб-компонентов

Команда Mozilla представила стабильный выпуск браузера Firefox 159 для разработчиков, принесший в веб-платформу два долгожданных стандарта, кардинально упрощающих верстку современных интерфейсов: аппаратные CSS-анимации, привязанные к прокрутке (Scroll-driven animations), и изолированные реестры веб-компонентов CustomElementRegistry внутри Shadow DOM.

Годами создание эффектных лендингов с прогресс-барами чтения, параллакс-эффектами или плавным появлением карточек требовало подключения тяжелых JavaScript-библиотек вроде GSAP или самописных обработчиков window.addEventListener('scroll'). Даже при использовании requestAnimationFrame такие скрипты нагружали главный поток (main thread), конкурировали за процессор с бизнес-логикой и вызывали неприятные рывки (джиттер) на мобильных устройствах.

Нативные анимации прокрутки на чистом CSS

Firefox 159 внедряет полную поддержку спецификации CSS Scroll-driven Animations. Теперь анимация привязывается к шкале прокрутки контейнера или позиции элемента в области видимости (View Timeline) декларативно, прямо в таблице стилей. Браузер исполняет такую анимацию непосредственно в потоке композитора (compositor thread) на графическом процессоре, гарантируя идеальные 60 FPS независимо от загруженности основного потока JavaScript.

Ниже представлен классический пример нативного индикатора прогресса чтения статьи, не требующий ни единой строчки скриптов:

/* Прогресс-бар чтения на чистом CSS без JavaScript */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll(root block);
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Свойство animation-timeline: scroll(root block) привязывает шкалу анимации к вертикальной прокрутке корневого документа: браузер плавно масштабирует плашку от 0 до 100% по мере движения скроллбара.

Изоляция веб-компонентов через CustomElementRegistry

Вторым важным прорывом стала поддержкаscoped-реестров компонентов new CustomElementRegistry(). Раньше веб-компоненты регистрировались исключительно в глобальном объекте customElements.define(). Если в проекте сталкивались две независимые микрофронтенд-библиотеки, пытавшиеся объявить тег <my-button>, происходил фатальный конфликт имен.

Теперь компонент может создать изолированный Shadow DOM со своим собственным реестром:

// Создание изолированного реестра компонентов в Shadow DOM
const isolatedRegistry = new CustomElementRegistry();
isolatedRegistry.define('ui-button', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<button class="local-btn"><slot></slot></button>';
  }
});

// Привязка реестра к изолированному корню дерева элементов
const hostElement = document.querySelector('#widget-host');
const shadowRoot = hostElement.attachShadow({
  mode: 'open',
  customElements: isolatedRegistry
});
shadowRoot.innerHTML = '<ui-button>Изолированная кнопка</ui-button>';

Ранее мы обсуждали новшества платформы в статье Firefox 157 и нативная стилизация тултипов: новые возможности веб-платформы, и релиз 159 делает верстку сложных интерактивных страниц еще более элегантной и производительной.