You can’t just do @media (prefers-reduced-data: no-preference)
alone because, as Kilian Valkhof says:
[…] that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data.
Usually @supports
is the tool for this in CSS, but that doesn’t work with @media
queries. Turns out there is a solution though:
@media not all and (prefers-reduced-data), (prefers-reduced-data) {
/* ... */}
This is a somewhat complex logic puzzle involving media query syntax and how browsers evaluate these things. It’s nice you can ultimately handle a no-support fallback situation in one expression.
Direct Link to Article — Permalink
The post Detecting Media Query Support in CSS and JavaScript appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…