# CSS: “touch-action”: X is not a “touch-action” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-touch-action-x-is-not-a-touch-action-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `touch-action` property only accepts `auto`, `none`, `manipulation`, or a combination of panning keywords and `pinch-zoom`, so the validator reports anything else, such as `all`.

There is no `all` keyword. To leave every touch gesture to the browser, use `auto`, which is also the initial value. `none` turns off panning and zooming, and `manipulation` keeps panning and pinch zoom but turns off extras such as double-tap zoom. For finer control, combine one horizontal keyword (`pan-x`, `pan-left` or `pan-right`), one vertical keyword (`pan-y`, `pan-up` or `pan-down`) and `pinch-zoom`, for example `touch-action: pan-y pinch-zoom`.

`auto`, `none` and `manipulation` can't be combined with other keywords, and two keywords for the same direction can't appear together. In those cases the quoted value isn't always the wrong part: `touch-action: none pinch-zoom` reports `none`, and `touch-action: pan-left pan-right` reports `pan-right`.

Browsers ignore a declaration they can't parse. Because the initial value is `auto`, an invalid `touch-action` often looks harmless, but it can't override an earlier rule: if one rule sets `touch-action: none` and a later one tries to undo it with `all`, the element keeps `none`. Even `auto` can't bring back a gesture that an ancestor turned off, because the browser intersects the `touch-action` values of the element and its ancestors up to the nearest scroll container.

## Invalid example

```css
.slider {
  touch-action: all;
}

.map {
  touch-action: none pinch-zoom;
}
```

## Valid example

```css
.slider {
  touch-action: auto;
}

.map {
  touch-action: pinch-zoom;
}
```