Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)
Media Queries Level 4: Media Query Range Contexts (Media Query Ranges) êŽë š
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 single values. This example will most likely be more readable to anyone who has (basic) programming knowledge:
/* 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.
đĄ
Although this post was originally published in October 2021, the list below is constantly being updated. Last update: Nov 16, 2023.
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 (postcss/postcss-media-minmax) to already write Range Contexts:
npm i 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)