Posted over 1 year 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".

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Dominik Schöler
Last edit:
over 1 year 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 cookies to improve usability and analyze traffic.
Accept or learn more