I'd like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don't (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don't, so as to avoid having mobile browsers emulate it with extra taps, as this breaks other interactions on the page - by not defining a hover state for those browsers this is avoided.
I've read up on the Interaction Media Queries feature and it looks like it should do the trick. I'd be able to do something like:
@media (hover: none) { /* behaviour for touch browsers */ }
According to CanIUse it is available on all the browsers I need to support except IE11 and Firefox.
So I wondered if I could do it the other way around - since the main touch devices all support it, then negate it:
@media not (hover: none) { /* behaviour for desktop browsers */ }
However, this doesn't seem to work at all.
Pseudocode example of what I'm trying to do:
.myelement { /* some styling */ /* note: no hover state here */ } @media(this device supports hover) { .myelement:hover { /* more styling */ } }
So, is there a way to make this work in the way intended, or am I down the wrong track?
Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the pointer , any-pointer , hover , and any-hover media features.
The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.
preventDefault() within ontouchstart or ontouchend. It appears to stop the hover effect when the button is touched, but it also stops the button click animation and prevents the onclick function from being called when the button is touched, so you have to call those manually in the ontouchstart or ontouchend handler.
not
should prefix media type (screen, print, all, etc) and not media feature (hover, point, etc).
Wrong:
@media not (hover: none)
Correct:
@media not all and (hover: none)
Yes, its unintuitive and weird. Source (see comments).
So you do not need javascript to alternate result of media query.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With