I was listening to an episode of the CSS podcast and found out there are some cool things we have access be using @media prefers queries. Let's see them one by one:
- prefers-color-scheme may be the best known of all of them. It allows us to set a coll dark mode for our app or site:
@media (prefers-color-scheme: dark) {
background-color: black;
color: white;
}
@media (prefers-color-scheme: light) {
background-color: white;
color: black;
}
As a side note, Lea Verou has a coll article about how you can easily add a dark mode by using CSS custom properties and hsl
.
- prefers-reduced-data this is a coll one I was not aware of. It's great because we can use it to load less costly assets (fonts, images etc) if the user has set this option to
reduce
.
@media (prefers-reduced-data: reduce) {
.hero {
background-img: url(smaller-size-img.jpeg);
}
}
- prefers-contrast, prefers-reduced-motion, and prefers-reduced-transparency - the names are pretty explanatory. They can be great tools for improving accessibility and tailoring the user experience.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.