Media Queries Level 4: Media Query Range Contexts

A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints. @media (min-width: 300px) and (max-width: 750px) { … } In CSS Media Queries Level 4 these type of Media Features can now be written as a …

A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints.

@media (min-width: 300px) and (max-width: 750px) {
	…
}

In CSS Media Queries Level 4 these type of Media Features can now be written as a “range context”, which uses ordinary mathematical comparison operators.

@media (300px <= width <= 750px) {
	…
}

The syntax might seem a little bit odd at first, but for me the trick is to read it as “the width sits in between the two values”

Also works with a single value:

/* Old Way */
@media (max-width: 750px) {
	…
}
/* New Way */
@media (width <= 750px) {
	…
}

~

At the time for writing, only Gecko/Firefox supports Range Contexts (ever since Firefox 63). There was some (minor) movement in the Blink/Chromium issue in September, but progress seems to have stalled. No word on WebKit/Safari.

The pen embedded below will indicate if your browser supports Media Query Range Contexts or not:

~

If you’re using PostCSS, you can use the postcss-media-minmax processor to already write Range Contexts:

npm install postcss-media-minmax
var fs = require('fs')
var postcss = require('postcss')
var minmax = require('postcss-media-minmax')

var css = fs.readFileSync('input.css', 'utf8')

var output = postcss()
  .use(minmax())
  .process(css)
  .css
  
console.log('\n====>Output CSS:\n', output)  

~

🔥 Like what you see? Want to stay in the loop? Here’s how:


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-28T17:43:50+00:00) » Media Queries Level 4: Media Query Range Contexts. Retrieved from https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/.
MLA
" » Media Queries Level 4: Media Query Range Contexts." Bramus! | Sciencx - Monday October 25, 2021, https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/
HARVARD
Bramus! | Sciencx Monday October 25, 2021 » Media Queries Level 4: Media Query Range Contexts., viewed 2024-03-28T17:43:50+00:00,<https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/>
VANCOUVER
Bramus! | Sciencx - » Media Queries Level 4: Media Query Range Contexts. [Internet]. [Accessed 2024-03-28T17:43:50+00:00]. Available from: https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/
CHICAGO
" » Media Queries Level 4: Media Query Range Contexts." Bramus! | Sciencx - Accessed 2024-03-28T17:43:50+00:00. https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/
IEEE
" » Media Queries Level 4: Media Query Range Contexts." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/. [Accessed: 2024-03-28T17:43:50+00:00]
rf:citation
» Media Queries Level 4: Media Query Range Contexts | Bramus! | Sciencx | https://www.scien.cx/2021/10/25/media-queries-level-4-media-query-range-contexts/ | 2024-03-28T17:43:50+00:00
https://github.com/addpipe/simple-recorderjs-demo