Summary

  • Lorsqu’une zone défilante atteint son bord, le navigateur peut transmettre le mouvement à son ancêtre. Le petit chat s’arrête ; la grande page continue.
  • contain empêche cette transmission tout en gardant un éventuel signal visuel au bord. none fait aussi disparaître ce signal local. Le choix touche directement la manière dont le lecteur perçoit la limite.

La scène a quelque chose d’un tour de passe-passe médiocre. On fait défiler les messages d’un chat posé sur un long article, on arrive au dernier, puis le doigt poursuit son trajet. Soudain, le paragraphe derrière le chat file vers le haut. Le premier brouillon public du W3C, en 2019, donne un nom à cette mécanique : les conteneurs forment une chaîne de défilement. Au bord de la fenêtre intérieure, le mouvement peut remonter jusqu’à la page. Le navigateur a suivi une règle ; le lecteur, lui, voulait seulement vérifier la fin de la conversation.

Pour empêcher l’évasion, un site pouvait poster du JavaScript à la frontière et appeler preventDefault() au bon moment. Le brouillon détaille le prix de ce gardien. Un écouteur non passif peut obliger le navigateur à attendre la décision du script, donc retarder le défilement. Annuler l’événement peut aussi annuler le mouvement normal jusqu’au bord, alors que seul le passage au parent gêne. Enfin, le même geste peut produire un petit rebond ou une lueur dans la fenêtre intérieure. Cette réponse locale aide à sentir la fin ; nul besoin de la sacrifier pour immobiliser l’article.

La réunion du groupe CSS de décembre 2016 montre le problème avant sa solution définitive. On parlait encore de scroll-boundary-behavior, prolongement d’une propriété Microsoft de chaînage. Tab Atkins posait la question concrète : lorsque le défilement touche le haut ou le bas, l’intention s’échappe-t-elle ou reste-t-elle dans la zone ? Simon Fraser rappelait le verrouillage d’un conteneur pendant un geste et s’inquiétait du pouvoir donné à une page de coincer l’utilisateur. Les fenêtres de chat figuraient parmi les exemples. Le groupe voulait normaliser l’idée, mais demandait de meilleurs noms et davantage de cas avant de trancher.

En janvier 2018, Majid Valipour proposa de transférer le travail incubé au WICG vers les brouillons du CSS Working Group. Son message mentionne l’état des navigateurs de l’époque. Ce déplacement importe surtout parce qu’il place la frontière dans une discussion publique entre auteurs de pages et fabricants de navigateurs. Une astuce locale pour sauver un chat devient une règle commune sur la destination d’un geste.

L’historique de publication du W3C date le premier brouillon public du 6 juin 2019. La règle distingue alors deux sortes d’actions au bord. Le rebond ou l’éclat dans la fenêtre sont locaux. Le passage au conteneur parent ou une navigation agit ailleurs. Avec auto, le navigateur suit son comportement habituel. Avec contain, il bloque les effets qui sortent de la fenêtre mais peut laisser le signal local. Avec none, il coupe aussi ce dernier. Un chat peut donc garder sa petite façon de dire « c’est fini » tout en refusant d’emmener l’article en promenade.

La direction complique l’affaire. Un axe horizontal et un axe vertical ne décrivent pas à eux seuls la progression de tous les textes. À Berlin, en avril 2018, le groupe décida d’ajouter les variantes block et inline. Elles suivent les axes logiques de la mise en page. La décision paraît discrète dans un compte rendu ; elle évite de bâtir une règle pensée pour une seule manière d’écrire et de lire.

Le brouillon utilise aussi une barre latérale fixe, un rafraîchissement tiré vers le bas et une liste infinie pour montrer que les bords n’ont pas tous le même métier. La barre latérale veut retenir le geste ; la liste peut vouloir supprimer jusqu’au rebond. Quand le chat atteint enfin sa dernière ligne, la bonne nouvelle n’est pas que plus rien ne se passe. C’est que la page reste à sa place, et que la fenêtre peut encore répondre au doigt.