Media Queries Level 4 are super exciting. In combination with Custom Properties (aka CSS Variables), they can help respond to the user’s environment in a very elegant way.
Let’s say we want to boost the contrast when the environment is bright to make text more readable.On the other hand, when reading the content at night (or in a dark alley, as I am sure you often do), we want a dark background, easier on the eyes. Here’s what it could look like in code, using light-level Media Queries:
:root { --body-copy: #555; --body-background: #eee;
}
body { color: var(--body-copy); background-color: var(--body-background);
}
@media (light-level: dim) { /* Night time… light text on dark background */ :root { --body-copy: #eee; --body-background: #333; }
}
@media (light-level: washed) { /* Boost contrast in bright environment */ :root { --body-copy: #000; --body-background: #fff; }
}
And here is what it would look like in browser depending on the light level:
I think you can already accomplish this effect with JavaScript in some browsers, but isn’t that more elegant when done with CSS?
Read more
Guest
