Touch Action

Set how touch gestures are handled by an element.

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

Chrome

Edge

Firefox

Safari

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;

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ta-(value)

Small≥640px

md:ta-(value)

Medium≥768px

lg:ta-(value)

Large≥1024px

xxl:ta-(value)

Extra Large≥1536px

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ta-(value)