Posted 5 months ago. Visible to the public.

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).

Motivation

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.

Application

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:

Copy
.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".

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
4 months 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