Skip to main content

Touch Action

Set how touch gestures are handled by an element.

View as Markdown
baselinewidely
ClassCSS
ta:autotouch-action: auto;
ta:mtouch-action: manipulation;
ta:nonetouch-action: none;
ta:pdtouch-action: pan-down;
ta:pltouch-action: pan-left;
ta:prtouch-action: pan-right;
ta:putouch-action: pan-up;
ta:pxtouch-action: pan-x;
ta:pytouch-action: pan-y;
ta:pztouch-action: pinch-zoom;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:ta:pr.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:ta:prFrom 32rem up.
@sm:ta:prFrom 40rem up.
@md:ta:prFrom 48rem up.
@lg:ta:prFrom 64rem up.
@xl:ta:prFrom 80rem up.
@xxl:ta:prFrom 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:ta:prContainer from 32rem up.
@c:sm:ta:prContainer from 40rem up.
@c:md:ta:prContainer from 48rem up.
@c:lg:ta:prContainer from 64rem up.
@c:xl:ta:prContainer from 80rem up.
@c:xxl:ta:prContainer from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:ta:prOn a touch screen.
@prm:ta:prWith reduced motion on.
@st:ta:prOn the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:ta:prOn :hover.
f:ta:prOn :focus.
fv:ta:prOn :focus-visible.
a:ta:prOn :active.
d:ta:prOn :disabled.
fc:ta:prOn :first-child.
c:ta:prOn :checked.
e:ta:prOn :empty.
fw:ta:prOn :focus-within.
i:ta:prOn :invalid.
in:ta:prOn :indeterminate.
lc:ta:prOn :last-child.
nc:ta:prOn :nth-child.
r:ta:prOn :required.
ro:ta:prOn :read-only.
v:ta:prOn :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::ta:prOn ::after.
b::ta:prOn ::before.
p::ta:prOn ::placeholder.
s::ta:prOn ::selection.