CSS Scroll Snap : I’ve got the power !

Support du module CSS Scroll Snap dans les navigateurs

Avant de vous en dire plus, commençons directement par l’état du support dans les navigateurs selon caniuse.com.

Avec un support de Chrome depuis sa version 78, de Firefox depuis sa version 71 et de Safari sur iOS depuis sa version 12.4, on peut dire qu’on couvre un large spectre de navigateurs (cf le panorama web de décembre dernier pour voir leurs parts de marché respectives).

A quoi cela ressemble ?

Pour le coup, une vidéo vous fera mieux comprendre le concept que ma prose (aussi brillante soit-elle).

https://www.youtube.com/watch?v=VmyF9S-sRhc

Ici, l’exemple est horizontal mais il en va de même pour un défilement vertical.

Principe de base avec 5 propriétés

Il suffit de 4 voire 5 propriétés pour créer facilement ce comportement. Les propriétés de CSS Scroll Snap sont appliquées aux éléments parents et enfants, avec des valeurs spécifiques pour chacun. On peut considérer le parent comme un conteneur « snap ».

scroll-snap-type « mandatory » vs. « proximity »

Appliqué au parent, la propriété scroll-snap-type peut être définie comme obligatoire (mandatory) ou de proximité (proximity).

• La valeur obligatoire signifie que le navigateur doit s’enclencher sur un point d’arrêt lorsque l’utilisateur arrête le défilement.
• La propriété de proximité est moins stricte : elle signifie que le navigateur peut s’accrocher à un point d’accrochage si cela semble approprié.

Dans l’absolu, on peut penser que la valeur mandatory permet une expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. plus sûre. Mais cela peut aussi être dangereux, si un élément à l’intérieur d’un conteneur déroulant est plus haut que la fenêtre de visualisation. On risque de ne pas permettre la visualisation de l’ensemble de l’élément.

scroll-padding

Toujours appliqué au parent, cette propriété permet de définir une marge intérieure où le contenu viendra se coller. Sans cette propriété ou avec une valeur à 0,  le contenu s’accrochera aux bords mêmes du conteneur. Cela peut être utile si votre mise en page comporte des éléments fixes comme un entête de page, un menu, etc…

scroll-snap-align

Appliqué à un élément enfant, cela vous permet de spécifier quelle partie de l’élément est censée s’accrocher au conteneur. Il a trois valeurs possibles : start, center, et end.

Ces valeurs sont relatives à la direction du défilement. Si vous faites défiler verticalement, start se réfère au bord supérieur de l’élément. Si vous faites défiler horizontalement, il s’agit du bord gauche. center, et end suivent le même principe. Vous pouvez définir une valeur différente pour chaque direction de défilement, en la séparant par un espace.

scroll-snap-stop « normal » vs. « always »

A ce jour cette propriété du module CSS Scroll Snap n’est que très partiellement supportée. Mais en voici le principe.

Par défaut, l’arrêt du défilement n’est activé que lorsque l’utilisateur arrête le défilement, ce qui signifie qu’il peut sauter plusieurs points d’arrêt avant de s’arrêter. Vous pouvez changer cela en définissant scroll-snap-stop : toujours sur n’importe quel élément enfant. Cela oblige le conteneur de défilement à s’arrêter sur cet élément avant que l’utilisateur ne puisse continuer à défiler.

scroll-margin

Appliqué à un élément enfant, elle permet de définir une marge extérieur à l’enfant pour ne pas le coller au bord même du conteneur parent. A priori, on arrive au même résultat qu’avec scroll-padding sur le conteneur parent.

Impact sur l’expérience utilisateur

La modification du défilement naturel par un processus redéfinit par le développeur front-end Le front-end désigne la partie visible d'un site web ou d'une application avec laquelle l'utilisateur interagit directement. Il englobe l'interface utilisateur, le design, et les éléments interactifs, généralement créés avec HTML, CSS, et JavaScript. est toujours risquée. Comme il s’agit d’un élément fondamental de l’interaction avec le navigateur, le modifier de quelque façon que ce soit peut sembler déroutant. Toutefois, il y a moult pages qui utilisent ce procédé nommé « scrolljacking » pour prendre le contrôle direct de la position du défilement. Mais souvent, trop souvent, c’est un composant JavaScript qui fait des calculs savants et redondants pour déterminer comment caler l’élément correctement comme le développeur le souhaite.

L’avantage du scrolljacking basé sur le CSS est que vous ne prenez pas le contrôle direct de la position du défilement. Au lieu de cela, vous donnez simplement au navigateur une liste de positions à afficher de manière appropriée. Cela signifie qu’une interface à défilement que vous construisez ressemblera à l’interface native, quelle que soit la plate-forme sur laquelle elle est affichée. Car c’est le navigateur qui va déterminer comment repositionner le défilement selon vos points d’arrêts. L’expérience utilisateur est effectivement proche de l’expérience native et le temps d’interprétation sera plus rapide qu’avec un composant JavaScript ! Au passage on notera qu’avec 4 ou 5 propriétés, la taille du code CSS sera  (une fois de plus) plus légère qu’un code JS équivalent.

Par contre, il conviendra au développeur front-end que nous sommes de faire preuve de congruence, en prenant soin de travailler avec des tailles relatives en em ou surtout en vh et/ou vw pour les interfaces plein écran.

Pour conclure, je vous recommande la lecture de l’excellent article de css-tricks sur le CSS Scroll Snap avec pleins d’exemples à la clef.

Source : developer.mozilla.org