Welcome to Mario's "I have no idea what I'm doing" dev.to posts :)
I am by no means a designer or in-depth CSS expert, but have recently had cause to work on some CSS for a web-based chatbot component. It had to work both on desktop and mobile browsers, and while the majority was quite straightforward, I came across some interesting behaviour by mobile browsers around the "hover" selector on buttons.
In short: mobile browsers seem to apply "hover" style to buttons that have focus.
This kind of confused me - the majority of mobile browsers (both on Android and iOS) applied the "hover" style to the button that had focus. This wasn't really what I was after, so I thought I'd wrap the hover style in a media query, to stop browsers than can't really hover (i.e. mobile browsers) from using it:
@media (hover: hover) {
However, this did not work, as it appears most mobile browsers consider themselves to be able to hover (via a long press). Damn. Ok, let's try the opposite:
@media not all and (hover: none) {
Still no luck, for the same reason as above I'd guess.
So the next thing I was looking at was the "pointer" media query, and hey presto, using "pointer: fine" appeared to work much better, as mobile browsers clearly don't consider themselves to have a fine pointer. There's only one problem with this: Firefox doesn't support it (yet?). To work around this, I added "-moz-touch-enabled: 0", so I ended up with this media query:
@media (-moz-touch-enabled: 0), (pointer: fine) {
This finally worked great, with one exception: the "hover" effect now doesn't kick in on Firefox on a laptop with a touch screen. I think I (or rather the client) can live with that, as at least it means the buttons now render as expected in all mobile browsers, and in all desktop browsers except the "Firefox + touch screen" combo.
Sharing this in the hope it may help someone down the line, but equally - I am no CSS expert by any stretch, and as I said, the "solution" isn't really a perfect solution in any case - if anyone reads this and shakes their head at my incompetence, please let me know any better solutions in the comments!
Top comments (13)
You can plug a mouse into an Android device. (Or use Bluetooth.)
And it gives you a normal cursor. So you can hover on mobile.
The way I usually handle this is to design in a way that the hover style is usually the same as the focus, or is a lesser version of the focus style (think hover: 3px bigger, focus: 6px bigger). The best way to think of the cursor on mobile is that it follows where you touch, so if you last touched a button, the hover state will still be applied to that button until you touch somewhere else.
Thanks - yes, this makes sense, also in terms of how to design, although in this case I wasn't in charge of design, just implementing it..
Haha yeah that's usually how it goes. Don't forget you can always let your client know that a small change in design can mean a lot for usability.
@media only screen and (min-width: 801px)?
Then what about high-resolution touch devices? like an iPad may be?
Interesting, I hadn't thought of that, thanks!
Thank you. I too have no idea what I'm doing.
I guess you should play with pointer-events on this. Also, there used to be a trick with onfocus="blur()" but i think it would affect keyboard navigation.
Re. onfocus, I tried to keep it simple by sticking to CSS only, with no Javascript - but will definitely look at pointer-events, I hadn't come across those before. Thanks!
Drums and CSS go together well, eh?
Regarding Firefox on mobile, I think you should handle it somehow, at least to make it usable. That media query you used, can you use opposite one, just for ff?
Firefox on mobile is just fine, the issue is that with the current media query, the "hover" style won't be applied on Firefox if the device has a touch screen (e.g. a laptop with a touchscreen running Firefox) even though it has a fine pointer.