Interaction "Trigger on" based on "hover" @media queries

With the new accessibility push, it'd be great to target devices based on hover capability. In essence, touch devices should not be judged by their size.


The hover @media query (linked below) has 95.6% market coverage and lets the developer assign CSS attributes based on the device's capacity to hover. This is both an accessibility issue and an aesthetic issue.


On Desktop 2 in 1s in tablet mode, components shouldn't trigger hover on touch. Similarly, differently-abled users may use their smaller devices with a cursor, which can hover.


This could be a "trigger on" option in the interactions panel (attached) and/or an option in the selector dropdown.


Links:

https://drafts.csswg.org/mediaqueries/#hover

https://caniuse.com/css-media-interaction

  • Khashayar Toodehfallah
  • Jul 8 2021
  • Reviewed