CSS Media Queries


Table of contents


This feature isn’t available in any browsers at the time of writing, but it definitely sounds like a future favorite. With the light-level media query, you can tune your styles based on whether your user is viewing your web app outside in daylight, or perhaps checking in before going to bed. This is great news for anyone who has ever tried to read their phone in the park, or check out a website at night!

There are three available values – dim, normal (the default), and washed.

Here’s an example where we change some CSS custom properties:

@media (light-level: dim) {
:root {
--text-color: white;
--background-color: black;

Read more at MDN.


Currently supported in Safari (and Safari on iOS).

The value is boolean, so none and inverted.

@media (inverted-colors) {
img {
filter: invert(1);
* {
box-shadow: none !important;
text-shadow: none !important;

Read more at MDN.

Preferences, preferences, preferences

The fifth level of CSS media queries also has a huge focus on personalization. It introduces no fewer than five distinct media queries that lets you tweak your website to whatever the user prefers!


This feature is already widely supported in browsers, and has three possible values – light, dark, and no-preference. Here’s an example where we change the background color of the site based on preference:

@media (prefers-color-scheme: dark) {
body {
background: #1e1e1e;
color: white;

Read more at MDN.

Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com


The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet.

<meta name="color-scheme" content="dark light" />
The page supports both dark and light color schemes,
and the page author prefers dark.
:root {
color-scheme: dark light;

Read more at web.dev


The prefers-contrast media query lets you cater to users who prefer high contrast content compared to your original design.

There’s two values here - no-preference and high.

@media (prefers-contrast) {
:root {
--text-color: black;

Read more at MDN.


With the prefers-reduced-motion media query, you can respect that wish as well. Use it to reduce those “bouncy” animations, fading images and “fun” transitions a bit. Note that you don’t necessarily have to remove all movement, but reduce it.

Browser support is pretty good. The value is boolean, so no-preference or reduce.

@media (prefers-reduced-motion) {
* {
transition-duration: 0.05s;
Data on support for the prefers-reduced-motion feature across the major browsers from caniuse.com


Some operating systems offer an option to reduce the amount of translucent layering effects used by the system. Although not supported by any browsers yet, the prefers-reduced-transparency media query is aiming to help you cater to those users.

The value is boolean, so no-preference and reduce.

@media (prefers-reduced-transparency) {
.floating-box {
opacity: 1;

Read more at MDN.


The value is boolean, so no-preference and reduce are the values.

@media (prefers-reduced-data) {
.hero-image {
background-image: none;
background-color: salmon;

Read more at MDN.

Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My memory bank, by Zander Martineau.