We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE


This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -ms-content-zoom-snap-points CSS property is a Microsoft extension that specifies where zoom snap-points are located.

This property is read/write.

Initial valuefalse
Applies tonon-replaced block-level elements and non-replaced inline-block elements
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar


The -ms-content-zoom-snap-points property is specified as one of the following values.


snapInterval( <percentage>, <percentage> )

Specifies where the snap-points will be placed.

  • The first percentage specifies where the first snap-point will be placed.
  • The second percentage specifies the distance between subsequent snap-points, both zoomed in and zoomed out from the initial snap-point.
snapList( <percentage># )

Specifies the position of individual snap-points as a comma-separated list of percentages, each of which represents a zoom factor.

  • If any value specified in is less than that specified by the -ms-content-zoom-limit-min property, the value of -ms-content-zoom-limit-min is used.
  • If any value specified is greater than that specified by the -ms-content-zoom-limit-max property, the value of -ms-content-zoom-limit-max is used.

Formal syntax

snapInterval( <percentage>, <percentage> ) | snapList( <percentage># )


This example demonstrates both types of values for the -ms-content-zoom-snap-points property. In the first selector, the first snap-point is at 0%, and the interval is set to 100%. In the second selector, each snap-point is listed separately—100%, 200%, 300%, and so on.

.snappy1 {
  -ms-content-zoom-snap-points: snapInterval(0%, 100%);

.snappy2 {
  -ms-content-zoom-snap-points: snapList(100%, 200%, 300%, 400%, 500%);


Not part of any specification.


This property has no effect on non-zoomable elements. See -ms-content-zooming for details on zoomable elements.

When a user pans or scrolls and then lifts his or her contact (for instance, a finger), the content can continue to move with inertia. Snap-points can change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop. By placing snap-points, you can make it easy for your users to manipulate your content and make your content stop at convenient or key places.

Starting with Windows 8.1, this property is also supported for touchpad interaction.

This property requires Windows 8 or later.

Document Tags and Contributors

 Contributors to this page: jameshkramer
 Last updated by: jameshkramer,