3

I'd like to determine if a browser supports a particular media query via Javascript.

For example does the browser support hover detection?

CSS.supports('@media ((hover: hover)');
// false

^ This syntax does not work.

Even though the browser can actually use @media ((hover: hover):

window.matchMedia('(hover: hover)').matches;
// true

Can anyone describe the syntax for using CSS.supports with media queries? Or show a different way to determine specific media query support via Javascript?

Gerard
  • 768
  • 5
  • 20
  • Does this answer your question? [How do I detect whether a browser supports mouseover events?](https://stackoverflow.com/questions/4643443/how-do-i-detect-whether-a-browser-supports-mouseover-events) – doğukan Jul 24 '20 at 17:58
  • The spirit of the question is about media queries in JS. @dgknca Thanks, that's a good resource, but I'd also like to know if it's possible with other media queries like `pointer: fine` – Gerard Jul 27 '20 at 15:59

1 Answers1

1

No.

CSS Conditional Rules Module Level 3 only provides for testing support for property: value.

CSS Conditional Rules Module Level 4 adds the ability to test for selectors.

There's no provision for testing for support for hover.

Note that even in browsers which do support it, it might not be accessible to the user (e.g. if they use a traditional desktop browser without a mouse/trackpad/etc).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335