Using the CSS @media prefers queries

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);
    }
}

📖 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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X