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) {
/* ... */
}- if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
/* ... */
}Interaction Media Features: Pointer
The pointer media feature is used to query the presence and accuracy of a pointing device such as a mouse. If multiple pointing devices are present, the pointer media feature must reflect the characteristics of the “primary” pointing device, as determined by the user agent.
Again the “primary” pointing device is intended as the primary input mechanism.
The draft from the W3C is standardizing that the ‘pointer’ Interaction Media Feature can have 3 different values:
- if the primary input mechanism of the…
