Today I learned a small trick about CSS media queries that can help to save some bytes on the wire. You might know that you can check for user preferences using media queries.
Let's take the prefers-reduced-motion media query as an example.👇
@media screen and (prefers-reduced-motion: reduce) {
/* stop all these animations */
}
You can use the prefers-reduced-motion query to stop animating elements when users prefer not to see motion and animations (learn more about why you should do that on CSS-Tricks). The query can have two different values: no-preference and reduce.
If you have used this media query before, you might know that you can also use its short variant and drop the reduce value. The media query will behave the same.
@media screen and (prefers-reduced-motion) {
/* stop all these animations */
}
And what you see there is the media query's boolean context in action. The spec defines the no-preference value as follows:
[no-preference] indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
This definition means that when you're using the shorthand media query without defining a value, everything other than no-preference will evaluate to true.
A boolean context might seem obvious for prefers-reduced-motion because it allows only two different values, but there are also media queries with more than two options. And today I learned, that these can implement a boolean context, too.
Look at prefers-contrast – this media query allows four different values: no-preference, less, more and custom. And while there are four available options; no-preference evaluates to false and every other value to true.
/* evaluates to true for `less`, `more` and `custom` */
@media screen and (prefers-contrast) { }
Boolean contexts allow you to shorten your media queries and come in handy when you only want to check for a non-default value. If you want to learn more about them, read the boolean context spec.
Top comments (0)