Interaction media queries
Interaction media queries such as pointer, any-pointer, hover, and any-hover describe the input capabilities available to the device. They help interfaces adapt to touch-first, mouse-first, or mixed input environments.
Overview
Interaction media queries such as pointer, any-pointer, hover, and any-hover describe the input capabilities available to the device. They help interfaces adapt to touch-first, mouse-first, or mixed input environments.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 41 | 16 | 64 | 9 | 41 | 9 | |
| CSS at-rule | ||||||
| The any-pointer CSS media feature tests whether the user has any pointing device (such as a mouse), and if so, how accurate it is. | 41 | 12 | 64 | 9 | 41 | 9 |
| The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements. | 38 | 12 | 64 | 9 | 50 | 9 |
| The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is. | 41 | 12 | 64 | 9 | 50 | 9 |
- Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See bug 40397980.
- On some Android devices, such as certain Samsung models, the `(hover: hover)` media query may incorrectly match. See bug 41445959.
Syntax
@media (hover: none) {
.tooltip { display: none; }
}
@media (pointer: coarse) {
button { min-height: 44px; }
}Live demo
Use cases
Hover enhancements
Add hover-only polish on devices that support it while keeping the base interaction available elsewhere.
Touch-friendly sizing
Adjust spacing and affordance density when coarse pointer input is likely.
Cautions
- Devices can have multiple input modes, so any-pointer and hover behavior may not be as binary as expected.
- Do not hide essential controls behind hover-only behavior.
Accessibility
- Core actions must remain available to keyboard, touch, and assistive technology users regardless of pointer hints.
- Use interaction queries to enhance usability, not to remove alternate access paths.
Related links
Powered by web-features