How to detect media query support

This one is a real brain teaser. 🙈

Kilian Valkhof published Detecting media query support in CSS and JavaScript and I had to read it a few times to understand its logic.

In short: that's how you can detect if a browser supports prefers-reduced-data CSS media query:

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

In long: read Killian's post.