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

Interaction Media Features and Their Potential (for Incorrect Assumptions)

The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.
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 “touch-action”

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 “pointer-events”