Last summer Kilian Valkhof did a wonderful write-up on the Polypane blog covering CSS Media Queries.
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use?
Good for beginners, but seasoned developers might also want to take a look at the “New notations in Media query levels 4 and 5” section 😉
/* Serve a smaller image by default */
body {
background-image: url(/images/small-fast-image.webp);
}
/* But replace it with a large image when applicable */
@media (prefers-reduced-data: no-preference) {
body {
background-image: url(/image/large-pretty-image.png);
}
}
Like prefers-reduced-motion, it’s good to think of the prefers-reduced-data: reduce option as the default option: people get the lean, fast experience, and only when they indicate no-preference, we send them more data. That way, older browser[s] that don’t support the media query get the lean experience by default.
I especially like the example where the Infinite Scroll paradigm is replaced with a “load more” button when the user has prefers-reduced-data: reduce set. Clever!
Update 2021-02-12: Thanks to the hard work by Miriam Suzanne and others this proposal is now officially part of the CSS Specification Process (ref) and set to be part of css-contain-3 … it’s happening, people! 🎉
Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries, which is quite exciting news I must say!
🤔 Container Queries?
Container Queries allow authors to style elements according to the size of a container. This is similar to a @media query, except that it evaluates against a container instead of the viewport.
/* (1) Create an implicit "container root" */
main,
aside {
contain: size;
}
.media-object {
display: grid;
gap: 1em;
}
/* (2) Container Query targeting the nearest
"container root" ancestor. The rules nested
inside will only be applied if the "container
root" has a max-width of 45em */
@container (max-width: 45em) {
.media-object {
grid-template: 'img content' auto / auto 1fr;
}
}
Applying contain: size;(1) onto an element will make it an implicit “container root” or “containment context”. Elements contained inside it can then have container queries applied onto them, by use of a new at-rule @container (<container-media-query>)(2). The target selector and CSS rules to apply in that case are — similar to what we do with “regular” media queries — nested within the @container at-rule.
In the example above extra rules will be applied to .media-object whenever its nearest “container root” ancestor — such as <main> or <aside> — has a max-width of 45em.
🧑🔬 This proposal is experimental and has not been approved by the CSSWG yet. The expressed “intent to prototype” is meant as an experiment to see whether this idea would be worth pursuing or not. In the end, it could be that the final syntax can differ from the one listed here, if the proposal is workable in the first place.
~
A previous version of this proposal by L. David Baron required a context selector to be set, but that has been dropped here. The @container rule from Miriam’s version will work in any containment context (read: the nearest parent element that has contain: size set). The syntax might still change, but that’s irrelevant to the prototype which is to be implemented:
This is not at all finalized, but the underlying problems we need to solve in Blink are (mostly) the same regardless of how the feature is accessed, so we’ll for now use this proposal as the temporary syntax.
Apart from the quite well known prefers-color-scheme and prefers-reduced-motion features, the Media Query Level 5 spec comes with a few more new ones.
The Media Query Level 5 spec is being drafted as we speak, and it includes some really nice ones. Some of them are still being figured out, but several of them are available in some browsers.
This article will take you through some of the most interesting new media queries in this new specification, and show you how to use them.
The light-level feature – which is used to query about the ambient light-level in which the device is used – looks like a very welcome addition 🙂
Next to Safari 12.1 earlier this month, Firefox 67 now also supports “CSS Color Scheme Queries”.
The prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android.
