Mozilla a publié Firefox 159 le 27 octobre 2026. Pour l’internaute, cette version apporte surtout du confort. Pour ceux qui fabriquent des sites, elle est plus importante qu’elle n’en a l’air : Firefox active enfin par défaut les animations CSS pilotées par le défilement, et prend en charge les registres d’éléments personnalisés « à portée limitée » pour les Web Components. Voici ce qui change, et ce que vous pouvez en faire dès maintenant.
Plan de l'article
Les animations pilotées par le défilement arrivent dans Firefox #
C’est la nouveauté phare de cette version. Selon les notes de version officielles de Mozilla, Firefox prend désormais en charge les scroll-driven animations. Une animation CSS, ou une animation créée avec la Web Animations API, peut maintenant avancer en fonction de la position de défilement d’un conteneur, ou de la visibilité d’un élément au moment où il entre dans l’écran.
Concrètement, cette version ajoute les propriétés animation-timeline, scroll-timeline, view-timeline et animation-range, ainsi que les interfaces JavaScript ScrollTimeline et ViewTimeline. La page MDN consacrée à Firefox 159 précise que la fonction est « activée par défaut » : plus besoin de passer par une préférence cachée.
À lire Chrome 156 : du hasard en CSS, des tableaux mieux figés et des imports qu’on peut retenter
Ce que cela permet sur un site
Jusqu’ici, une barre de progression de lecture en haut d’un article, des images qui apparaissent en fondu quand on les fait défiler ou un en-tête qui rétrécit au défilement demandaient presque toujours un peu de JavaScript. Le plus souvent, on utilisait un écouteur sur l’événement scroll ou un IntersectionObserver.
Avec ces propriétés, une partie de ces effets s’écrit en CSS. Une animation @keyframes classique est simplement rattachée à une chronologie de défilement plutôt qu’à une durée. Par exemple, une barre de progression peut utiliser animation-timeline: scroll(), et un effet d’apparition animation-timeline: view() associé à un animation-range qui délimite la zone où l’animation se joue.
Moins de JavaScript, c’est un code plus simple à maintenir et un fil principal moins sollicité au moment où l’utilisateur fait défiler la page. Restez quand même raisonnable : une page qui bouge à chaque coup de molette fatigue vite. Pensez aussi aux visiteurs qui ont réglé leur système pour réduire les animations, en enveloppant vos effets dans une requête @media (prefers-reduced-motion: no-preference).
Faut-il garder une solution de repli ?
Oui, comme pour toute fonction récente. Une règle @supports (animation-timeline: scroll()) permet de n’appliquer l’effet qu’aux navigateurs qui le comprennent. Ailleurs, le contenu doit rester lisible et complet. L’animation est un bonus, jamais une condition pour accéder au texte.
À lire Créer son premier site internet : le guide pour ceux qui n’y connaissent rien
Web Components : des registres d’éléments à portée limitée #
Deuxième changement notable pour les développeurs : la prise en charge des scoped custom element registries. D’après Mozilla, un registre créé avec le constructeur CustomElementRegistry() est séparé du registre global window.customElements. Ainsi, deux éléments personnalisés qui portent le même nom de balise peuvent cohabiter sur une même page.
MDN détaille l’usage : une arborescence shadow peut créer son propre registre, dont les définitions ne s’appliquent qu’à cette partie du DOM. La propriété customElementRegistry est disponible sur Document, Element et ShadowRoot.
Le cas typique est une page qui assemble des composants de plusieurs sources : un widget de prise de rendez-vous, un lecteur intégré, une bibliothèque d’interface. Si deux d’entre eux déclarent chacun un <app-button>, le registre global provoquait une collision. Avec des registres à portée limitée, chaque composant garde ses propres définitions.
Les autres changements utiles #
Côté sécurité du HTML injecté, la Sanitizer API change de méthode. Les fonctions qui nettoient du HTML, comme Element.setHTML(), retirent désormais les éléments et attributs indésirables pendant l’analyse du balisage, et non plus après coup. Mozilla précise une conséquence pratique : les constructeurs d’éléments personnalisés ne s’exécutent plus pour les éléments que le nettoyeur supprime.
À lire Que se passe-t-il si je ne renouvelle pas mon nom de domaine ?
La console web devient aussi plus pratique au quotidien. Elle accepte maintenant de redéclarer des variables let, const et class, ce qui permet de corriger un extrait de code et de le relancer sans erreur de redéclaration.
Côté graphisme, WebGL gagne les extensions EXT_clip_control et EXT_texture_mirror_clamp_to_edge, et WebGL 2 active EXT_texture_norm16, sur les appareils dont le pilote graphique les prend en charge.
Enfin, un ménage : l’ancienne syntaxe expérimentale de la mise en page « masonry » (la valeur masonry de grid-template-columns et grid-template-rows, et la propriété masonry-auto-flow) est supprimée. Elle n’était activée par défaut que dans Nightly. MDN indique qu’elle est remplacée par la mise en page grid lanes, via les valeurs grid-lanes et inline-grid-lanes de la propriété display. Si vous aviez testé l’ancienne syntaxe, c’est le moment de mettre vos essais à jour.
Côté utilisateurs #
Les internautes verront d’autres changements : les mots de passe enregistrés sont accessibles depuis la barre latérale par défaut, et un raccourci permet de chercher parmi les onglets ouverts (Ctrl+Maj+A sous Windows et Linux, Cmd+Maj+A sur macOS). Sur macOS, le partage passe par le sélecteur natif du système. Mozilla a aussi corrigé plusieurs failles de sécurité : la mise à jour est recommandée.
À lire Mon site a été piraté, que faire ?
Notre conseil #
Pour un site vitrine ou un blog, l’arrivée des animations pilotées par le défilement dans Firefox est une bonne occasion de faire le tri dans les petits scripts d’effets visuels. Repérez ceux qui ne servent qu’à animer au défilement, testez leur équivalent en CSS dans une branche de développement, et gardez un rendu propre pour les navigateurs qui ne suivent pas encore. Votre page y gagnera en légèreté, sans rien sacrifier de son contenu.
