Detecting Media Query Support in CSS and JavaScript

Testing Browser Support for Media Queries

Simply writing @media (prefers-reduced-data: no-preference) isn’t enough, because the query evaluates as false both when a browser doesn’t support it and when support exists but the user opts for data savings, as Kilian Valkhof points out.

@media not all and (prefers-reduced-data), (prefers-reduced-data) {
  /* ... */
}

Although @supports normally handles feature detection in CSS, it doesn’t apply to media queries. Valkhof shows workaround however, that bundles the fallback logic into a single expression, avoiding a more convoluted multi-step check.