Enabling new interoperable panning experiences through the CSS Scrolling Snap Points Specification
Today, we submitted a new proposal to the W3C, CSS Scrolling Snap Points, designed to enable fast and fluid panning experiences for touch and other input devices, based on APIs introduced in IE10 and improved in IE11. These APIs enable developers to more easily build panning experiences such as paginated content and scrolling photo galleries that are perfect for touch and work just as easily with mouse, keyboard, or trackpad. A great example of this experience is the MSN homepage optimized for Windows 8:
Users can swipe left or right to browse the day’s headlines. Using CSS Snap Points, Internet Explorer lights up this experience using the same hardware-accelerated panning technology used for panning a Web page with touch in IE. Users get the stick-to-your-finger performance with inertia panning and over-pan bounce that they expect. Additionally, the browser snaps the content to the nearest headline after the user pans.
The code for such an experience is simple, requiring just 2 new lines of CSS:
<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>
This code works with touch swipe in IE10 and IE11; new in IE11, this same markup automatically works with mouse wheels, arrow keys, and trackpads—allowing users to access these experience no matter the device they happen to be browsing with at the moment. Enabling a similar experience by writing JavaScript can take hundreds of lines of code, often doesn’t offer stick-to-your-finger manipulation, and typically stutters in performance on low-end hardware.
Coming on the heels of Pointer Events reaching Candidate Recommendation and just a year after our initial proposal of Pointer Events to the W3C, CSS Snap Points is another way that we are advancing the Web by providing rich, immersive experiences that are perfect for touch and work well across other input modalities.
-Jacob Rossi and Matt Rakow, Program Managers, Internet Explorer
Comments
Anonymous
October 22, 2013
The comment has been removedAnonymous
October 22, 2013
Is there a JS API to advance scrolling by a snap point or to a specific point? BTW: CSS doesn't use camelCase function names.Anonymous
October 22, 2013
The comment has been removedAnonymous
October 22, 2013
@kl - Agreed. CSS is all lowercase (with the exception of user defined IDs and Class names which are case sensitive) @Microsoft - please fix this ASAP before you remove the prefix.Anonymous
October 22, 2013
This is something we've needed on the Web platform for a long time, and I'm glad the working group are finally standardising it.Anonymous
October 22, 2013
Agreed, it must be snap-interval() in comparison with linear-gradient() etc.Anonymous
October 22, 2013
Mixed case is not "normal" for CSS but actually CSS is case-insensitive so you could use whatever you want (except classes and IDs). Maybe snapInterval is nicer to read. I personally do not like it either but just for fun one could use something like baCK-GRoUnD-cOLOr: REd ;)Anonymous
October 22, 2013
Jake - We are not aware of problems uninstalling IE11 preview on Windows 7. You should be able to do so through Control PanelProgramsPrograms and Features and click “View installed updates”; there you should see Internet Explorer 11 in the installed update list and be able to uninstall it.Anonymous
October 22, 2013
Using the above code in desktop mode with <- -> keys and width: 960px; for 960x540 images I am finding of white space between images which I have to correct with margin-right: -4pxAnonymous
October 22, 2013
Can you post video demo of this new proposed standard just like Mozilla posted CSS sticky position video air.mozilla. It will help better understanding what you meant since its about touch experience.Anonymous
October 22, 2013
Nice work! Well done. Looking forward playing around with it.Anonymous
October 23, 2013
@kl, Jake, Gordon - Regarding casing, there are other standardized examples of CSS functions that have mixed casing. For example, rotateX/rotateY/rotate/skewX/skewY from CSS Transforms. That said, getting consensus on the syntax is a part of the standardization process and something we'll work through before removing prefixes. Thanks for the feedback.Anonymous
October 23, 2013
The comment has been removedAnonymous
October 23, 2013
The comment has been removedAnonymous
October 23, 2013
@Jake I have installed IE11 on Win7 and it works perfectly well. So there must be something wrong with your installation :/Anonymous
October 24, 2013
Why do I feel like it's a bad way to solve this problem? Looks more like an input handling matter + CSS animation than something worth an extra property... I think this scroll-snap-point thingy would be much less useful than a :swipe[angle~=0][length>50%] pseudo element (akin to :focus, :hover etc.) which would not only cover this case (it would need programmers to define the actual animations, but that's what toolkits are for) but also many others such as rotation of 2D and 3D objects, scrolling or zooming in on a single page element...Anonymous
October 24, 2013
@Jim A formatting error in the blog post introduced whitespace between the images. We've updated the post to correct this. Thanks! @Mitch74 Microsoft and the W3C welcomes feedback on the design/syntax of these APIs from web developers and browser developers alike. Public discussion occurs on the www-style@w3.org mailing list with a subject starting with [css-snappoints]. For your specific suggestion, native snap point APIs allow for a more fluid transition between active panning (the user's input is driving the scroll) and inertial animation. For example, we can match the initial animation speed to the current velocity of the scroll when a snap occurs. Moreover, snap points use more than just swipe length and angle to determine the snap location. Physics like velocity are also taken into account, which would dramatically complicate the required syntax to be expressive enough to build the simple cases described in this post.Anonymous
October 25, 2013
@Rob (Microsoft) - I too can not install the messed up IE11 browser from my Windows 7 install. The browser doesn't load tabs properly and the dev tools are messed up and magenta on the last "tab". A stand-alone uninstall is REQUIRED because IE11 (or an update listing) does NOT show up in any part of the windows installed programs list to be removed. We would have removed this weeks ago if there had been an obvious way to do so. IIRC the fact that this was broken (both IE11 and the uninstaller) was posted SEVERAL times on the IE Blog when it was first released. If you fixed the blog comment form there likely would have been even more filings as they would not have been lost in the abyss that is "Community Server's Failed Legacy Blog System" that should have been put out to pasture about 7 years ago.Anonymous
October 28, 2013
The comment has been removedAnonymous
October 28, 2013
@Real McCoy: the results with Google Chrome and Firefox also differ from the reference image ...