-
-
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!
See the following table. Using any other keyword value for the pointer feature will give different results across desktop and mobile browsers.