Compatibilité des navigateurs et CSS Scroll Snap

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Dans ce guide, nous verrons comment créer des points d'accroche de défilement compatibles pour la période où certains navigateurs prennent en charge l'ancienne version de la spécification et d'autres implémentent la nouvelle version.

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

L'exemple contient les propriétés scroll-snap-points-y et scroll-snap-destination, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété scroll-snap-type à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

Faut-il utiliser les deux spécifications ?

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester scroll-snap-align car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

Pourquoi existent deux versions ?

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

On espère que l'implémentation sera homogénéisée prochainement pour les versions récentes des navigateurs. Cet article a pour but de vous aider à proposer aujourd'hui une ergonomie cohérente entre les différents navigateurs.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,