相互運用可能なパン エクスペリエンスを実現する CSS Scrolling Snap Points 仕様

本日 Microsoft は、W3C への新たな提案 (英語) として CSS Scrolling Snap Points を提出いたしました。CSS Scrolling Snap Points は、高速で流れるようなパン エクスペリエンスを、タッチ デバイスを始めとする各種入力デバイスに実現するもので、IE10 で導入され IE11 で進化した API を基礎に設計されています。開発者の皆様は、これらの API を活用することで、ページ分割されたコンテンツやスクロール対応のフォト ギャラリーなど、パンを活かしたエクスペリエンスを簡単に構築できます。これはタッチに最適化されたエクスペリエンスですが、マウス、キーボード、トラックパッドでも直感的に操作できます。このエクスペリエンスが活用されているのが、Windows 8 に最適化された MSN ホームページです。

ユーザーは右左にスワイプして最新の見出しを切り替えることができます。CSS Snap Points によって Internet Explorer に実現されるこのエクスペリエンスでは、IE でのタッチ操作による Web ページのパンに使用されているものと同じ、ハードウェア アクセラレーションを活用したパン テクノロジが使われています。指にくっついて動かすことができ、パンを離すと慣性で進み、行き過ぎると揺れながら止まるなど、ユーザーが想定するとおりに動作します。また、ユーザーがパンを止めた後は、最も近い見出しでコンテンツがスナップされます。

このエクスペリエンスを実現するコードはシンプルです。CSS のコード行を 2 つ追加するだけです。

 <style> .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /* Set up points to which scrolling will snap*/ -ms-scroll-snap-points-x: snapInterval(0px,100%); /* Require that scrolling always end at a snap point */ -ms-scroll-snap-type: mandatory; } </style> <div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div> 

タッチ スワイプを実現するこのコードは、IE10 と IE11 で動作します。IE11 の新機能として、同じマークアップがマウス ホイール、方向キー、トラックパッドでも動作するようになりました。これによって、ユーザーがどのようなデバイスでブラウズしていても、同じエクスペリエンスが提供されます。同じエクスペリエンスを JavaScript で実現しようとすると、コード行は数百にもなり、多くの場合は指にくっつく操作は提供できず、ローエンド ハードウェアの多くでスムーズな動作を得ることができません。

Microsoft から生まれ勧告候補に達したポインター イベント (英語) が W3C に初めて提案されてからわずか 1 年後、Microsoft は新たに CSS Snap Points を提案いたします。これは、タッチに最適化されていると同時に、その他の入力方式でも適切に動作するリッチでイマーシブなエクスペリエンスによって Web をさらに進化させる、Microsoft の新たな取り組みの 1 つです。

-Internet Explorer プログラム マネージャー Jacob Rossi、Matt Rakow