Read more

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

Dominik Schöler
June 01, 2018Software engineer at makandra GmbH

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

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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:

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

Posted by Dominik Schöler to makandra dev (2018-06-01 09:35)