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:

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 (20)

  1. Real McCoy says:

    Thank you! But what about the existing issues? Are you guys down for repairing them?

    Here is one story:

    SVG has some issues in IE9, 10 and now 11. Consider the following SVG document:

    tavmjong.free.fr/…/svg_test.svg

    Here is the reference image:

    tavmjong.free.fr/…/svg_test.png

    There are at least 3 issues here:

    1. IE11 doesn't render masked colored and grayscale image at the bottom: connect.microsoft.com/…/incorrect-paths-moveto-rendering-in-svg

    2. The wrong inheritance of brush: connect.microsoft.com/…/wrong-inheritance-with-svgs-fill-opacity

    3. The drop shadow is missing while printing the document: connect.microsoft.com/…/no-drop-shadow-when-printing-svg

    In theory, IE supports SVG version 1.1,

    document.implementation.hasFeature("http://www.w3.org/…/feature, "1.1")

    returns true!

    but in reality, the team which implemented SVG (two years ago) never got a chance to test the conformance afterwards.

    Please escalate these issues to SVG team.

  2. kl says:

    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.

  3. Jake says:

    For those of us on Windows 7 that installed the IE11 preview (that is a full on-borked-alpha-quality-release) and are stuck with it because there is no uninstall feature available (as a standalone exe or a program in "add/remove programs" or as a feature in windows features) — CAN YOU PLEASE PROVIDE A STANDALONE UNINSTALLER!

    It is driving me bonkers that I'm a Web developer with a completely borked IE install because the IE11 preview was not ready for testing and the uninstaller DOES NOT WORK/EXIST.

    Please note for the "go getters" that are about to reply telling me where it is — DON'T! I've already looked/tried all the things suggested and like others have posted here on this blog – there are SEVERAL of us that have got stuck with this release.

    If you are unwilling to provide an uninstaller please at least provide a line of communication to Microsoft where we can work with Microsoft to diagnose this problem and resolve it.

    Currently I can not properly develop or test in IE with this Frankenstein build and considering I develop Web Apps all day long I'm stuck to use a VM just to test in IE – even though I'm running on Windows!

    Please respond and provide some sort of solution!

  4. Jake says:

    @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.

  5. Josh Tumath says:

    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.

  6. Gordon says:

    Agreed, it must be snap-interval() in comparison with linear-gradient() etc.

  7. Chris says:

    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 ;)

  8. Rob (Microsoft) says:

    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.

  9. Jim says:

    Using the above code in desktop mode with <-  -> keys and width: 960px; for 960×540 images

    I am finding of white space between images which I have to correct with margin-right: -4px

  10. Ahmad says:

    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.

  11. Albert says:

    Nice work! Well done. Looking forward playing around with it.

  12. Jacob Rossi [MSFT] says:

    @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.

  13. pmbAustin says:

    Okay, another IE11 problem.  I just upgraded everything to Windows 8.1 and IE11, and I have a problem with a site that I don't have in any other browser including IE10.

    Go to gizmodo.com with any other browser, and sign up with a "Burner" account.  Record the user ID and password you're given.

    Now go to gizmodo.com and try to sign in with that burner ID.  It seems successful, but if you do anything, you'll be prompted to sign in again.  it doesn't "stick".  It doesn't remember even for a moment.

    I had this problem with IE10 until I modified the cookie handling to always accept session cookies, but making the same changes in IE11 didn't work.  I tried disabling other security features and checkboxes (some requiring a restart) and still no dice.  I cannot log into this website and have it remember me.

    This is definitely an IE11 problem, as all other browsers work just fine.

    Help?

  14. Christian Stockwell [MSFT] says:

    @pmbAustin: Thanks for the report. I've filed this feedback at connect.microsoft.com/…/gizmodo-login-is-not-preserved-when-signing-in-with-a-burner-account, and we'll investigate.

  15. Esben says:

    @Jake  

    I have installed IE11 on Win7 and it works perfectly well. So there must be something wrong with your installation :/

  16. Mitch 74 says:

    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…

  17. Jacob Rossi [MSFT] says:

    @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.

  18. Brandon says:

    @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.

  19. Dennis says:

    When will Internet Explorer come with a useful JavaScript Debugger and with useful error messages? I always have to fight with it. I got once the Visual Studio debugger working so I was possible to find errors at legacy websites but in fact web developers must not buy to build websites which should also run with Internet Explorer.

  20. Dennis says:

    @Real McCoy: the results with Google Chrome and Firefox also differ from the reference image …