CSS4 media queries to tackle touch

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.”

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.