New standards developments in CSS are providing a better future for developers that needs to detect touch devices just with their CSS.
CSS Media Queries Level 4 indeed is going to provide 2 new features: hover and pointer.
Interaction Media Features: Hover
The hover media feature is used to query the user’s ability to hover over elements on the page with the primary pointing device. If a device has multiple pointing devices, the hover media feature must reflect the characteristics of the “primary” pointing device, as determined by the user agent.
With the words “primary” pointing device, the W3C draft intended the primary input mechanism system (method or gesture or hardware).
As the draft from the W3C is standardizing, the ‘hover’ Interaction Media Features can have 2 different values:
- if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
/* ... */
}