This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it’s almost guaranteed front-end developers all over would start using it as soon as it’s ready. I know I would, as I liberally use custom properties now, and the DRYness of custom properties is one of the exact same benefits we’d get with custom media queries.
The syntax is:
@custom-media --narrow-window (max-width: 30em);
@media (--narrow-window) {
/* narrow window styles */
}
@media (--narrow-window) and (script) {
/* special styles for when script is allowed */
}..which I lifted from the Chrome Bug (star it to signal interest).
I’ve come around on the idea of postcss-preset-env. It used to think it was too theoretical which made me nervous. — so much CSS isn’t particularly polyfill-able without JavaScript. Plus, if anything changed with the specs, you’ve basically locked yourself into a CSS processor rather than getting future features, as that processing eventually stops processing. But all the CSS transformations in here generally seem pretty chill, deliver a lot of value (like custom media queries!), and you can pick which stage you feel most comfortable with.
Direct Link to Article — Permalink
The post Can we have custom media queries, please? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-09-07T22:17:55+00:00) Can we have custom media queries, please?. Retrieved from https://www.scien.cx/2021/09/07/can-we-have-custom-media-queries-please/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.