Bug 180234

Summary: Implement syntax improvements for media queries from level 4 specification
Product: WebKit Reporter: Florian Rivoal <florian>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: 50167214, aaron_chu, dev, dino, emilio, firefoxic.dev, kevin.legouguec, koivisto, kolemen.annie, kyle.bavender, miriam, rik, sebastianalfabc, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: FromImplementor, InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
URL: https://drafts.csswg.org/mediaqueries-4/#mq-syntax
Bug Depends on: 243771, 246205, 246398, 246452, 246517, 246611, 246628, 246690, 246804, 246948, 247061, 247118, 247263, 248236, 248342, 248391, 248530, 248594, 248619    
Bug Blocks:    

Description Florian Rivoal 2017-11-30 20:46:12 PST
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) {
  …
}
Comment 1 Radar WebKit Bug Importer 2017-12-04 08:10:47 PST
<rdar://problem/35829622>
Comment 2 Vadim Makeev 2020-06-05 10:08:11 PDT
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
Comment 3 yisibl 2022-07-15 01:37:18 PDT
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
Comment 4 Antti Koivisto 2022-12-02 04:03:34 PST
This is now implemented.
Comment 5 Antti Koivisto 2023-02-21 07:20:56 PST
*** Bug 167031 has been marked as a duplicate of this bug. ***