180234 2017-11-30 20:46:12 -0800 Implement syntax improvements for media queries from level 4 specification 2023-02-21 07:20:56 -0800 1 1 1 Unclassified WebKit CSS WebKit Nightly Build All All RESOLVED FIXED https://drafts.csswg.org/mediaqueries-4/#mq-syntax FromImplementor, InRadar P2 Normal --- 243771 246205 246398 246452 246517 246611 246628 246690 246804 246948 247061 247118 247263 248236 248342 248391 248530 248594 248619 1 florian webkit-unassigned 50167214 aaron_chu dev dino emilio firefoxic.dev kevin.legouguec koivisto kolemen.annie kyle.bavender miriam rik sebastianalfabc simon.fraser webkit-bug-importer oldest_to_newest 1376700 0 florian 2017-11-30 20:46:12 -0800 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) { … } 1377693 1 webkit-bug-importer 2017-12-04 08:10:47 -0800 <rdar://problem/35829622> 1659664 2 hi 2020-06-05 10:08:11 -0700 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 1884004 3 50167214 2022-07-15 01:37:18 -0700 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 1916196 4 koivisto 2022-12-02 04:03:34 -0800 This is now implemented. 1935499 5 koivisto 2023-02-21 07:20:56 -0800 *** Bug 167031 has been marked as a duplicate of this bug. ***