Bug 180234
| Summary: | Implement syntax improvements for media queries from level 4 specification | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Florian Rivoal <florian> |
| Component: | CSS | Assignee: | 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: | |||
Florian Rivoal
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) {
…
}
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/35829622>
Vadim Makeev
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
yisibl
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
Antti Koivisto
This is now implemented.
Antti Koivisto
*** Bug 167031 has been marked as a duplicate of this bug. ***