Thanks to the W3C CSS Working Group and the CSS community, we have a cleaner solution.
On the Media Queries Level 4 Working Draft, there is a spec for Interaction Media Features that includes three definitions:
These provide the capability to query a document based on the presence and accuracy of the user’s pointing device and whether it has the ability to hover over elements.
Let’s take a closer look at each one:
Pointing Device Quality: The pointer Feature
The pointer media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the “primary” input mechanism, as determined by the user agent.” - W3C
The key word here is “accuracy” of the pointing device.
- A mouse or a drawing stylus is very accurate and defines the value of
- A finger or a Kinect peripheral isn’t, and takes the value of
Therefore, we can adapt our UI elements to the user’s pointer capabilities. This is useful for making hit areas larger, if the user’s main input mechanism is a finger.