[csswg-drafts] [css-conditional] CSS.supports for media queries? (#5272)

mathiasbynens has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional] CSS.supports for media queries? ==
Spec: https://drafts.csswg.org/css-conditional-3/#dom-css-supports

**Use case:** Given a media query like `(prefers-reduced-data: reduce)`, I want to determine whether the host environment supports this query (regardless of whether the query matches). (Currently, the only way to do this is to manually write a feature test which injects some CSS with media queries into the page, and then check if it had an effect.)

`CSS.supports` is super handy for feature detection, but it doesn't support feature-detection for media query expressions.

`matchMedia` can be used to figure out whether or not a given media query matches, but not whether or not it is supported. E.g. `matchMedia('(prefers-this-doesnt-exist: lolwat)')` returns an object with `matches: false`, but there's no indication whether or not it can ever match / is supported in the current implementation.

**Potential solutions:**

- `CSS.supports()` could be extended to support media queries, i.e. `CSS.supports('@media (...)')`. The spec + implementations would have to branch on whether or not the `conditionText` parameter looks like a media query. which may not be ideal.
- The object returned by `matchMedia('(prefers-this-doesnt-exist: lolwat)')` could be extended with a `supported: true/false` property. This doesn't seem ideal, since it has nothing to do with matching media.
- We add a new API specifically for this case, perhaps something like `CSS.supportsMedia('(prefers-reduced-data: reduce)')`.

Apologies if this has been discussed previously; a quick search didn't reveal anything relevant.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5272 using your GitHub account

Received on Tuesday, 30 June 2020 10:18:35 UTC