Skip to main content
CSS is fun and cool and I like it.
Almanac

touch-action

The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions.

#element {
  touch-action: pan-right pinch-zoom;
}

The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch … Read article

Almanac

pointer-events

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

.avoid-clicks {
  pointer-events: none;
}

While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any HTMl element are:

  • none prevents all click, state and cursor options on the specified HTML element
  • auto restores the
Read article
icon-link icon-logo-star icon-search icon-star