Summary

  • L’album qui s’immobilise entre deux photos a d’abord inspiré des points d’arrêt. Les comptes rendus du groupe CSS montrent ensuite un changement plus concret : décrire l’alignement d’une image dans une fenêtre utile, avec des règles distinctes pour le conteneur et pour l’image.
  • Le texte de 2021 précise le sort d’une photo déjà choisie lorsque la mise en page bouge : si elle existe toujours, le navigateur doit revenir sur elle. L’arrêt suit le sujet, pas une ancienne coordonnée.

Le photographe livre une série de portraits de tailles différentes. Sur téléphone, la lectrice fait défiler la bande ; son doigt ne connaît ni largeur de carte ni centre géométrique. Le premier projet public de 2015 proposait des points où le conteneur pouvait se poser. Des points pouvaient revenir à intervalle régulier ou venir d’éléments. La solution réglait l’arrêt embarrassant entre deux pages, mais une galerie de tailles variables et un bandeau fixe au-dessus des images posaient une question plus fine : quel bord de quelle photo doit rencontrer quelle partie visible de l’écran ?

Le compte rendu de la réunion CSS du 2 décembre 2015 saisit le changement en cours. Matt Rakow annonçait l’intégration des notions d’aire et d’alignement. Le groupe décidait de remplacer scroll-snap-destination par scroll-snap-padding, puis scroll-snap-coordinate par scroll-snap-align et une aire d’accrochage. Il demandait aussi des mots clés d’axe sur le conteneur. Elika Etemad voulait inscrire ces décisions pour donner aux implémenteurs une direction claire, même si certains détails restaient ouverts. Le point isolé cédait la place à une relation entre un objet et son cadre.

Lors d’une réunion de mai 2016 à San Francisco, le groupe s’est attardé sur ce qui résiste au joli dessin : les éléments plus grands que la fenêtre, les positions théoriques hors du champ visible et les aires impossibles à atteindre. Il a retenu pour scroll-snap-align une logique proche de certaines positions d’arrière-plan, ajouté Etemad et Tab Atkins-Bittner à l’équipe éditoriale, puis renommé le travail css-scroll-snap. Le nouveau nom est facile à mémoriser ; les cas invisibles sont ceux qui empêchent réellement une galerie de mentir au regard.

Le projet de juin 2016 a réparti les choix. scroll-snap-type appartient au conteneur ; scroll-snap-align indique pour chaque élément la rencontre souhaitée avec la fenêtre d’accrochage. L’autrice peut centrer une photographie sans écrire un programme pour suivre chaque mouvement du doigt. Le document donne aussi une place à proximity dans une longue page : on doit pouvoir s’arrêter au milieu d’un passage. Le mode mandatory impose davantage le rythme de la mise en page ; il mérite donc une raison précise, comme une courte suite d’images qui se lisent l’une après l’autre.

La fenêtre utile et la photo ne se règlent pas au même endroit. La Candidate Recommendation d’août 2018 distingue le scroll-padding du conteneur et le scroll-margin de l’élément. Un bandeau permanent réduit l’espace réellement intéressant dans le conteneur ; une photo peut avoir besoin de respirer autour de son propre bord. Le texte soumet également les déplacements programmés, comme scrollTo(), aux règles d’accrochage. Le bouton qui fait avancer l’album ne gagne pas une voie privée pour se garer de travers.

L’histoire continue après l’arrêt. Si une nouvelle image charge plus haut et déplace la bande, faut-il maintenir l’ancien nombre de pixels ou la photo que la lectrice regardait ? La Candidate Recommendation de mars 2021 retient la photo : lorsque le même point associé à l’élément existe encore, le conteneur doit s’y raccrocher. Si plusieurs éléments auparavant alignés se séparent, l’élément ciblé ou ayant le focus passe d’abord. Ces règles concernent la continuité de la lecture, pas une jolie animation. Padding et marge servent aussi au défilement vers un élément lorsque l’accrochage est désactivé ; le cadre a trouvé un emploi au-delà de l’album.

L’historique officiel date les étapes de 2015, 2016, 2018 et 2021. L’intérêt de la progression se voit quand la page cesse d’être idéale : portraits de largeurs inégales, en-tête fixe, saut programmé, nouvelle image chargée. L’éditrice dessine des cadres qui ont du sens ; le navigateur garde la photo choisie à sa place même quand les murs bougent. La lectrice, elle, continue de tourner les pages sans demander les clés du garage.