Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

A look at a new CSS feature (May 2019)

A look at a new CSS feature (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 everyday use. Now, dark mode is becoming more of a feature of modern operating systems (and macOS was one of the first to do this) and as a result, it is becoming more standardised.

Here's a little test. In light mode, this will appear as a black colour with white text whereas in dark mode it will appear as a gray colour with black text.

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

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

Posted by jamiebalfour04 in The Web
web
css
features
Comments
Powered by DASH 2.0
Scan and keep for the latest article or review every time!
https://www.jamiebalfour.scot/redirect/action/latest-article/