An editor's draft of Media Queries Level 4, edited by Florian Rivoal, has been released. It explains that, because CSS already caters for media types, the new proposals are primarily aimed at enabling more precise targeting, making design responsive to input types.
One of the new proposed properties is 'pointer', which would take the values 'none', 'coarse' and 'fine', with 'coarse' and 'fine', respectively, representing "a pointing device of limited accuracy" (such as a finger on a touchscreen) and "an accurate pointing device" (such as a traditional desktop pointer, controlled by a mouse or trackpad).
Elsewhere, a 'hover' property would query whether the input can hover, enabling designers to amend a site's functionality accordingly. Rivoal told .net that the proposals have yet to be debated in the CSS Working Group, but he expects them to be well received.
The new ideas in part arrived because of the relative failure of media types. Rivoal told us: "As far as I know, no browser uses the 'tv' or 'handheld' types, for instance," which means they cannot be relied on. However, media features are a "resounding success", he said, which we can expect to see more of in future versions of the Media Query spec. Posited Rivoal, this is because beyond screen characteristics, design differentiation is usually required due to input mechanisms.
Elaborating on the properties in the new proposals, Rivoal said: "The 'pointer' and 'hover' properties describe features of the input system. Another approach would have been to list various known input systems, letting authors explicitly query for mouse or touch. But as media types have shown, explicit lists work poorly.
"Should we differentiate between a mouse, a trackball and a track-pad? What about stylus touch and finger touch, or single touch and multi-touch? Or a phone keypad versus a TV remote control? Are these exclusive, or can several match at the same time? These questions don't really have good answers. Instead, by focusing on features of the input devices, we get a more flexible system which is also a lot easier to get right."
Regarding 'hover', Rivoal said a reason developers want to know if a user's on a touchscreen is because you cannot hover with touch input, and therefore things like drop-down/pop-up menus that appear on hover should be avoided.
"Querying explicitly for 'hover' lets you do that, but in addition to working well on smart phones, your design will also behave well on any system that can't hover, even it hasn't been invented yet. You can't do that with explicit lists of input devices.”
