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