Media Queries for Input Devices

What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.

How: You can use media queries.

@media( pointer: coarse | fine | none ){ ... }
/* Primary input device is a finger | a mouse, touchpad or stylus | there is 
no primary pointing device */

@media( hover: hover | none ){ ... }
/* Primary input device can hover | it cannot hover or there is no primary 
pointing device */

@media( any-pointer: coarse | fine | none ){ ... }
/* Any input device (not necessarily the primary one) is a finger | a mouse,
touchpad or stylus | there is no pointing device at all */

@media( any-hover: hover | on-demand | none ){ ... }
/* Any input device (not necessarily the primary one) can hover | shows hover 
state without hovering (with a prolonged tap for example) | no input device 
has any ability to show hover state or there is no pointing device at all */

Where: You can read more at CSS-Tricks. The article is over 3 years old but still good.
You can check support at Can I use…

Thoughts: I haven’t been using these enough and they can be a big help in making user experience better. Support is excellent, the only exception is IE, but at least you can assume that IE will rarely be used on a touch screen. But if you want to play it safe, I guess you could always design for touch screens with coarse control first, and add hover options etc through media queries.

Photo credit: Photo of the Empire State Building lit up in red from the Hudson. By me.

Leave a Comment