Add Media Queries Ranges

[jonathantneal]

Media Queries Ranges

A syntax for defining media query ranges using ordinary mathematical comparison operators

Example code:

@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}

Specification: https://www.w3.org/TR/mediaqueries-4/#mq-ranges
Resource: PostCSS Polyfill (https://github.com/postcss/postcss-custom-media)
Resource: cssdb (https://jonathantneal.github.io/css-db/#mediaqueries-mq-ranges)

Suggested ID: mq-ranges or mediaqueries-mq-ranges

• Related to but not dependent on Media Queries Level 4 #1069

[cvrebert]

+1

[ethanresnick]

This would be very useful, because it's hard to polyfill the < and > operators (without the equals sign). See https://www.w3.org/TR/mediaqueries-4/#example-940c271b. Using fractional pixels, which would be the natural way to polyfill this, apparently causes some bugs: postcss/postcss-media-minmax#14

[Malvoz]

+1

[JakoD]

+1
Seems to be supported only by Firefox since Version 63 (tested with https://codepen.io/jakod/pen/rNaLjGq)

[Malvoz]

Chrome tracking bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=1034465

[Schweinepriester]

Available via MDN: https://caniuse.com/mdn-css_at-rules_media_range_syntax

[Schweinepriester]

Coming in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1034465#c33

WebKit/Safari: https://bugs.webkit.org/show_bug.cgi?id=180234

[yisibl]

Ship in Chrome 104

• https://chromestatus.com/feature/5203042742829056
• https://groups.google.com/a/chromium.org/g/blink-dev/c/E4Vd7w70OsU/m/f6XEE8TnEwAJ
• https://twitter.com/argyleink/status/1538004165007265792
• https://www.bram.us/2021/10/26/media-queries-level-4-media-query-range-contexts/
• https://developer.chrome.com/blog/media-query-range-syntax/

[Fyrd]

Now available at https://caniuse.com/css-media-range-syntax (MDN entry should be removed from search results at end of the week)