diff --git a/index.html b/index.html index fd9b863..72de715 100644 --- a/index.html +++ b/index.html @@ -949,7 +949,7 @@

Name:touch-action - Value:auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation + Value:auto | none | [ [ pan-x | pan-left | pan-right | pan-inline | pan-inline-start | pan-inline-end ] || [ pan-y | pan-up | pan-down | pan-block | pan-block-start | pan-block-end ] ] | manipulation Initial:auto Applies to:all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups. Inherited:no @@ -991,17 +991,21 @@

Details of touch-action valu

The touch-action property covers direct manipulation behaviors related to viewport panning and zooming. Any additional user agent behaviors, such as text selection/highlighting, or activating links and form controls, MUST NOT be affected by this CSS property.

The terms "panning" and "scrolling" are considered synonymous (or, more aptly, "panning" is "scrolling" using a direct manipulation input). Defining an interaction or gesture for triggering panning/scrolling, or for triggering behavior for the auto or none values, are out of scope for this specification.
-
auto
+
auto
The user agent MAY consider any permitted direct manipulation behaviors related to panning and zooming of the viewport that begin on the element.
-
none
+
none
Direct manipulation interactions that begin on the element MUST NOT trigger behaviors related to viewport panning and zooming.
-
pan-x
pan-left
pan-right
pan-y
pan-up
pan-down
-
The user agent MAY consider direct manipulation interactions that begin on the element only for the purposes of panning that starts in any of the directions specified by all of the listed values. Once panning has started, the direction may be reversed by the user even if panning that starts in the reversed direction is disallowed. In contrast, when panning is restricted to a single axis (eg. pan-y), the axis cannot be changed during panning.
-
manipulation
+
pan-x, pan-left, pan-right
+
pan-inline, pan-inline-start, pan-inline-end
+
pan-y, pan-up, pan-down
+
pan-block, pan-block-start, pan-block-end
+
The user agent MAY consider direct manipulation interactions that begin on the element only for the purposes of panning that starts in any of the axes or directions specified by the pan-* value used. Once panning has started, the direction can be reversed by the user even if panning that starts in the reversed direction is disallowed. In contrast, when panning is restricted to a single axis (using pan-x, pan-y, pan-block, or pan-inline), the axis cannot be changed during panning.
+
manipulation
The user agent MAY consider direct manipulation interactions that begin on the element only for the purposes of panning and continuous zooming (such as pinch-zoom), but MUST NOT trigger other related behaviors that rely on multiple activations that must happen within a set period of time (such as double-tap to zoom, or double-tap and hold for single-finger zoom).
Additional touch-action values common in implementations are defined in [[COMPAT]].
-
The touch-action property only applies to elements that support both the CSS width and height properties (see [[CSS21]]). This restriction is designed to facilitate user agent optimizations for low-latency direct manipulation panning and zooming. For elements not supported by default, such as <span> which is a non-replaced inline element, authors can set the display CSS property to a value, such as block, that supports width and height. Future specifications could extend this API to all elements.
+

The touch-action property only applies to elements that support both the CSS width and height properties (see [[CSS21]]). This restriction is designed to facilitate user agent optimizations for low-latency direct manipulation panning and zooming. For elements not supported by default, such as <span> which is a non-replaced inline element, authors can set the display CSS property to a value, such as block, that supports width and height. Future specifications could extend this API to all elements.

+

touch-action supports both physical and logical values, as defined in [[!CSS-WRITING-MODES-3]]. pan-x and pan-y refer to the horizontal and vertical axes. pan-left, pan-right, pan-up, and pan-down are [=physical=] direction values. In contrast, pan-inline refers to the abstract [=inline axis=], and pan-block to the [=block axis=]. The remaining logical values (pan-inline-start, pan-inline-end, pan-block-start, pan-block-end) are [=flow-relative=] – their physical meaning depends on the element's [=writing mode=].

The direction-specific pan values are useful for customizing some overscroll behaviors. For example, to implement a simple pull-to-refresh effect the document's touch-action can be set to pan-x pan-down whenever the scroll position is 0 and pan-x pan-y otherwise.