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

Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。

この記事では、ウェブサイトやアプリにスクロールスナップの対応を追加する際に、ブラウザー間やブラウザーのバージョン間の互換性に関連して発生する可能性のある質問について考えます。

もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。

主に以下のようなことに注意してください。

• scroll-snap-type-x (en-US) および scroll-snap-type-y (en-US) プロパティが削除された
• scroll-snap-type プロパティが個別指定となり、 scroll-snap-type:mandatory のような古い一括指定の構文が動作しなくなった

既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit 接頭辞付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。

この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。

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

スクロールスナップは、強化された機能が得られなくても、すべてが機能するというフォールバックが可能な、CSS の優れた部分のひとつです。現時点では、フォールバック版の恩恵を受けるユーザーが多数いるというデータがない限り、新仕様のみを実装することをお勧めします。

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

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