CSS Media Quries Level 4 bring in a bunch of syntactic improvements. They make media queries much more readable and maintainable. https://drafts.csswg.org/mediaqueries-4/#mq-syntax Here's an example: Before: @media (min-width: 20em), not all and (min-height: 40em) { @media not all and (pointer: none) { … } } After: @media ((width >= 20em) or (height < 40em)) and (pointer) { … }
<rdar://problem/35829622>
2020 state of the feature: 1. It’s implemented in Firefox 2. There’s open issue in Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=1034465 3. There’s PostCSS plugin to make it work after the build step https://github.com/postcss/postcss-media-minmax
The range syntax has been released in Chrome 104[1], and @container in Safari 16 also supports range syntax. [1]: https://chromestatus.com/feature/5203042742829056
This is now implemented.
*** Bug 167031 has been marked as a duplicate of this bug. ***