Firefox initially implemented an early version of the Scroll Snap Specification, called Scroll Snap Points. In this guide we look at how to create cross-browser compatible scroll snap code during the period where some browsers support the new spec, and some the old spec.
In this initial example we have used the old specification alongside the current specification in order to make scroll snapping work in all browsers which support some form of scroll snapping.
The example adds the
scroll-snap-destination properties, which are deprecated, to make scroll snapping work in Firefox. We also added the
scroll-snap-type property twice, once with the
y axis value needed for browsers that support the new spec, and once for Firefox, which supports the property but without the
If you test carefully you may find that you can get scrollsnapping working in more browsers, during this interim period. The old properties are documented here on MDN under Scroll Snap Points.
Do you need to use both specs?
Scroll snapping is one of those nice parts of CSS in which the fallback is that you don't get the enhanced functionality, but everything still works. Therefore you might decide to give Firefox the same experience as other browsers that don't support scroll snapping at all. Once the new spec is implemented then those users will get the scroll snapping too.
If you want to test using Feature Queries for support of the new spec then we'd suggest testing for
scroll-snap-align as this property did not exist in the old implementation. However, these properties shouldn't cause any problems to non-supporting browsers due to the way that browsers simply ignore CSS that they do not understand.
Why do we have two versions?
Finally, you might wonder why we ended up in a scenario where two versions exist at all. This is the reality of developing new CSS — it can't be developed in a vacuum away from browser implementations. At some point browsers need to implement a spec to show that it works, and to discover any problems that only become apparent when the spec is in use alongside other properties in the real world. In such cases we can end up with implementations of older versions available alongside newer versions as browsers are in the process of updating.
Hopefully we will have the updated implementation across all modern browsers very soon; these notes will help if you are keen to offer a consistent experience cross-browser right now.