Share via

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

  • Article

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

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

Comments

  • Anonymous
    November 01, 2013
    The comment has been removed