ブラウザーの互換性とスクロールスナップ

Firefox は当初、初期版の Scroll Snap 仕様書、いわゆる Scroll Snap Points を実装していました。このガイドでは、一部のブラウザーが新しい仕様書、一部が古い仕様書に対応している時期の間、ブラウザー間で互換性のあるスクロールスナップのコードを作成する方法を見てみます。

この最初の例では、古い仕様書とともに新しい仕様書を使用して、スクロールスナップに何らかの形で対応するすべてのブラウザーで動作するスクロールスナップを実装します。

この例では、非推奨となった scroll-snap-points-y および scroll-snap-destination プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 scroll-snap-type プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な y 軸の値を伴い、もう一つは Firefox で、 y 値のないプロパティに対応しているもののためのものです。

慎重にテストをすると、この過渡期に、より多くのブラウザーでスクロールスナップが機能することが分かります。古いプロパティは、 MDN の Scroll Snap Points 以下に文書化されています。

両方の仕様書を使用する必要があるか

スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。したがって、 Firefox にスクロールスナップにまったく対応していない他のブラウザーと同じ操作性を提供することにするかもしれません。新しい仕様が実装されれば、それらのユーザーもスクロールスナップを利用できるようになります。

新しい仕様書に対応していることを、特性クエリを使用して確認したいのであれば、 scroll-snap-align を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。

なぜ二つの版があるのか

最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 - ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 そのような場合、ブラウザーが更新の途中である際に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。

うまくいけば、まもなくすべての最新のブラウザーで更新された実装が行われるでしょう。これらのメモは、ブラウザー間で一貫した操作性をブラウザーをまたがって提供したい場合に役立ちます。

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,