# Touch Action

Set how touch gestures are handled by an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 36 · Edge 12 · Firefox 52 · Safari 13

| Class | Properties | Value |
|-------|------------|-------|
| `ta:auto` | touch-action | `auto` |
| `ta:m` | touch-action | `manipulation` |
| `ta:none` | touch-action | `none` |
| `ta:pd` | touch-action | `pan-down` |
| `ta:pl` | touch-action | `pan-left` |
| `ta:pr` | touch-action | `pan-right` |
| `ta:pu` | touch-action | `pan-up` |
| `ta:px` | touch-action | `pan-x` |
| `ta:py` | touch-action | `pan-y` |
| `ta:pz` | touch-action | `pinch-zoom` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `ta:auto` | touch-action | `auto` |
| `ta:m` | touch-action | `manipulation` |
| `ta:none` | touch-action | `none` |
| `ta:pd` | touch-action | `pan-down` |
| `ta:pl` | touch-action | `pan-left` |
| `ta:pr` | touch-action | `pan-right` |
| `ta:pu` | touch-action | `pan-up` |
| `ta:px` | touch-action | `pan-x` |
| `ta:py` | touch-action | `pan-y` |
| `ta:pz` | touch-action | `pinch-zoom` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `ta:auto` | touch-action | `auto` |
| `ta:m` | touch-action | `manipulation` |
| `ta:none` | touch-action | `none` |
| `ta:pd` | touch-action | `pan-down` |
| `ta:pl` | touch-action | `pan-left` |
| `ta:pr` | touch-action | `pan-right` |
| `ta:pu` | touch-action | `pan-up` |
| `ta:px` | touch-action | `pan-x` |
| `ta:py` | touch-action | `pan-y` |
| `ta:pz` | touch-action | `pinch-zoom` |