[csswg-drafts] [selectors] Proposal for a :hover-only pseudo class (#7544)

devongovett has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Proposal for a :hover-only pseudo class ==
## Intro

The current `:hover` pseudo class current has an issue: due to backward compatibility with older sites, it applies on tap on touch devices. This makes sense as it ensures that older sites not designed for compatibility with touch devices are usable (e.g. hover menus). However, it also leads to sub-optimal experiences in many cases, where the hover state "sticks" on tap. Ideally it wouldn't apply at all on touch devices.

The `hover`/`any-hover` media queries appear to be a workaround to this. Wrap your `:hover` selectors in those, and they won't apply on touch devices. However, this does not work correctly on devices with both pointer and touch support, e.g. modern iPads, Windows laptops with touch screens, etc. The media query doesn't update based on the input device the user is currently using, only based on what devices are available. Therefore, sometimes the hover effect either doesn't apply when it should, or applies when it shouldn't depending on the current input device.

Currently, the only way to work around this is to apply classes with JavaScript based on pointer events rather than using `:hover`. I wrote more details and examples in this [blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-2.html).

## Proposal

I would like to propose a new `:hover-only` pseudo class. This would apply only when hovering with a pointer or another device capable of hover, and would not apply when using touch input, stylus input, etc. Updating the existing `:hover` pseudo class to have this behavior would be a huge breaking change, so I think a new pseudo class is needed here.

While this can be achieved with JavaScript, I think a CSS-only solution would be very nice. Writing the JS from scratch to handle this is quite involved, and likely not as performance optimized as something browsers could implement natively. Due to the complexity, most websites don't implement this, leading to a worse user experience. I think if it were built into the web platform and easier for developers to get right, the UX of hoverable elements across the web could be improved.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7544 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 30 July 2022 23:35:03 UTC