Difference and practicality of pointer vs. any-pointer media features

Question

The documentations on pointer and any-pointer read pretty similar, as testing whether the user has “a” or “any” pointing device doesn’t make a difference in the scope of this media feature, does it?

I tried the following CSS …

@media (pointer: fine) {body{background:green}}
@media (pointer: coarse) {body{background:red}}
⸻
@media (any-pointer: fine) {body{background:green}}
@media (any-pointer: coarse) {body{background:red}}

… both on a notebook with a connected mouse, and only with its touchpad, as well as a smartphone with only its touchscreen, and with a connected mouse.

In all scenarios, the desktop yielded “fine” (even with its coarse? touchpad) and the smartphone yielded “coarse” (even with a fine? mouse connected), whereas I anticipated:

• any-pointer should have yielded fine on the smartphone with the mouse connected
• pointer should have yielded coarse on the notebook with only the touchpad available

I hope I just don’t grasp it just yet, but otherwise … is it a bit quirky? Or what are practical scenarios for pointer/any-pointer respectively in regard to style usage and user hardware? (Why would one need both?)

Answer 1

pointer refers to the primary input, while any-pointer refers to whether any such pointer is attached to the device.

Smashing magazine has an article which exemplifies it well:

The first one is a cellphone that has a keyboard and a mouse connected via Bluetooth, while the primary pointer device of this cell phone is a touchscreen, the addition of a mouse adds an accurate pointer to it.

The second one is a mini wireless keyboard that can be used for devices like Smart TVs, X-Box, or even mobile vehicle TVs. Smart TVs’ are not very accurate, but this control has a touchpad that adds an accurate pointer to this device.

What do those two elements have in common? Both of them won’t be detected by the previously mentioned media queries [using pointer], because both of them detect the primary input mechanism. How do we detect those cases? This is where once again CSS brings us two more tools to help us: media queries any-hover and any-pointer.