-
-
Save perjo927/e1f114398fc6fb8538a1412bea800f1a to your computer and use it in GitHub Desktop.
/* | |
* Compiled CSS: | |
*/ | |
a { | |
color: green; | |
} | |
@media not all and (pointer: coarse) { | |
a:hover { | |
color: blue; | |
} | |
} |
@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 | |
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; | |
} | |
`)}; | |
`; |
// Example for React-ts & Styled Components | |
import { css } from "styled-components"; | |
export const hoverSupported = style => css` | |
@media not all and (pointer: coarse) { | |
${style}; | |
} | |
`; |
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.
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!
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.