CSS: Support hover only on non-touch devices using media query

HoverSupported.css

/*
 * Compiled CSS:
  */
a {
  color: green;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
  }
}

HoverSupported.scss

@mixin hover-supported {    
   /* 
    * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
    * coarse: The primary input mechanism includes a pointing device of limited accuracy.
    */
    @media not all and (pointer: coarse) {
      &:hover {
        @content;
      }
    }
}

a {
    color:green;

    @include hover-supported() {
        color:blue;
    }
}

RandomAnchor.tsx

// RandomAnchor.tsx
import styled, { css } from "styled-components";
import { hoverSupported } from "./CssUtils";

export const RandomAnchor = styled.a`
  color: green;
  /*
   * Only use hover for the browsers we choose to support
   */
  ${hoverSupported(css`
    &:hover {
      color: blue;
    }
  `)};
`;

ReactCssUtils.ts

// Example for React-ts & Styled Components
import { css } from "styled-components";

export const hoverSupported = style => css`
  @media not all and (pointer: coarse) {
    ${style};
  }
`;

From: MDN

"The pointer CSS @media media feature can be used to apply styles based on whether the user's primary input mechanism is a pointing device, and if so, how accurate it is."

Virtually all modern mobile browsers recognize coarse pointer, while no desktop browsers recognize it. Therefore this feature in CSS is an excellent way to rule out touch devices from triggering undesired CSS hover effects.

See the following table. Using any other keyword value for the pointer feature will give different results across desktop and mobile browsers.

This was discovered while researching answers to a question similar to a problem I had: "How to remove/ignore :hover css style on touch devices", mainly because some Samsung browsers trigger hover when it was undesired in that specific context.

Codepen: https://codepen.io/programmerper/pen/XqmWGP

Are there any updates to a solution now that this no longer works in Firefox desktop?!

Are there any updates to a solution now that this no longer works in Firefox desktop?!

I found this one:
@mixin hover-supported { @media not all and (pointer: coarse), (min--moz-device-pixel-ratio:0) { &:hover { @content; } } }

the original query that is mention that it breaks with 2018 Firefox, I tested the pen https://codepen.io/programmerper/pen/XqmWGP with desktop Firefox 87.0 and it works

the original query that is mention that it breaks with 2018 Firefox, I tested the pen https://codepen.io/programmerper/pen/XqmWGP with desktop Firefox 87.0 and it works

Thanks @aquaductape, duly noted!