Posted almost 3 years ago. Visible to the public. Linked content.

CSS: Using interaction media detection to disable hover styles for devices that have no hover

Since late 2015, all major browsers (still excluding Firefox) support pointing device media queries. These can be used to distinguish e.g. coarse from fine pointers (e.g. finger vs mouse), or a device with hover support from one without (e.g. desktop with mouse vs tablet).


When hover styles modify the DOM, most mobile devices activate the hover styles on first tap. A second tap is required to trigger a click. While this can be handy, at times it makes the UX worse.

Another issue with hover styles is that they tend to stick on touch devices, i.e. many times the user can't "unhover" something he has "hovered" by clicking it.

Note that these problems occur only occasionally. They're not something you'll need to fix every day.


It makes sense to only apply hover styles on devices that support it. Unfortunately, since Firefox doesn't support this yet, it would leave Firefox without hover styles at all. This means you need to keep your default hover styles, but may reset certain styles for devices that cannot hover:

.color-on-hover &:hover color: red @media not all and (hover) // Undo hover style &:hover color: $text-color

The same strategy can be applied for the "double tap issue".

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Dominik Schöler
Last edit:
almost 3 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more