Questions tagged [interaction-media-features]

The “interaction” media features reflect various aspects of how the user interacts with the page. Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the pointer, any-pointer, hover, and any-hover media features.

By the W3C (https://www.w3.org/TR/mediaqueries-4/#mf-interaction):

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. (To query the capabilities of any available pointing devices, see the any-pointer media feature.)

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. (To query the capabilities of any available pointing devices, see the any-hover media feature.)

4 questions
61
votes
7 answers

Media query for devices supporting hover

I'd like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don't (e.g. touchscreen devices). Specifically I want to declare a hover state on browsers that support it, but not for browsers that don't,…
moogal
  • 1,599
  • 2
  • 11
  • 12
11
votes
1 answer

How to detect if pointer coarse or fine

I read this about interaction media which is explain how css can detect if pointer is touchscreen or not. It's using @media query like @media (pointer: coarse){ body{ // do something } } but I just wonder how to implementing it using…
Ampersanda
  • 2,016
  • 3
  • 21
  • 36
3
votes
1 answer

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

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)…
dakab
  • 5,379
  • 9
  • 43
  • 67
2
votes
1 answer

Firefox error: "Expected media feature name but found ‘hover’"

I want to differentiate styling based on whether the client browser supports hovering or not. I read that media features would do the job and so I used the following structure: /* Supports hovering */ @media (hover: hover) { ... } /* Does not…
a_guest
  • 34,165
  • 12
  • 64
  • 118