New CSS features (May 2019)

The prefers-color-scheme is a new feature that is of particular interest to me. A few years ago, slightly after Mac OS X offered a dark mode, I also decided to offer a little dark mode feature on my website. Years later I removed this because it was extra JavaScript that was unnecessary for every day use. Now, dark mode is becoming more of a feature of modern operating systems (and technically macOS was one of the first to do this) and as a result it is becoming more standardised.

Here's a little test.

So what do I mean by standardised? Well, operating systems across the board are able to talk directly to browsers and indeed webpages being visited by those browsers and as a result tell them whether or not they have a feature enabled or not. One feature that is becoming standardised is this dark mode - something very commonly used by developers since it's better on the eyes. This dark mode feature informs the website that the page requested should be displayed in dark mode if possible. As mentioned, currently macOS and Windows 10 support this new dark mode standard and allows them to inform a website that the user is in dark mode.

As a developer, this interests me a lot and so I put together a simple bit of code to test it.

<style>
@media (prefers-color-scheme: dark) {
  #block_dark {
    background:#000;
    color:#fff;
    border:1px #333 solid; 
  }
}
</style>

This feature will definitely become more and more of a thing with websites such as Stack Overflow and other developer-central websites, as well as quite a lot of news sites because those websites predominantly focus on reading long pieces of text.