coderef

touch-actionBaseline · Widely available

The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 19, 2019. Widely available since Mar 19, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155
Edge
12+Supportedsince Jul 29, 2015
Current: 154
Firefox
1–51Not supported
52+Supportedsince Mar 7, 2017
Current: 157
Safari
1–12.1Not supported
13+Supportedsince Sep 19, 2019
Current: 27
MobileChrome Android
18–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155
Firefox Android
4–51Not supported
52+Supportedsince Mar 7, 2017
Current: 157
Safari iOS
1–9Not supported
9.3+Supportedsince Mar 21, 2016
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: touch-action.

Feature detection

CSS · check before using
@supports (touch-action: initial) {
  /* styles that rely on touch-action */
}

/* or in JavaScript */
if (CSS.supports("touch-action", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (10). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
touch-action3612521336529.3
touch-action.manipulation3612521336529.3
touch-action.none36125213365213
touch-action.pan-down5579✕✕55✕✕
touch-action.pan-left5579✕✕55✕✕
touch-action.pan-right5579✕✕55✕✕
touch-action.pan-up5579✕✕55✕✕
touch-action.pan-x36125213365213
touch-action.pan-y36125213365213
touch-action.pinch-zoom56128513568513