One of the features on my new website is it now honors your browser’s color scheme preferences using the new prefers-color-scheme media query. With more operating systems adopting dark modes, this is a nice new feature that I hope more website will implement.

I recognize that a responsive color scheme might not be for everyone at this point and not all browsers currently support this media query, so an override switch is also a good idea. Read on for how I implemented this feature.

Back in the day reserving space on a page for an image was easy, just add the width and height attributes! Then along came responsive designs, and that all kinda went out the window, because you see the browser didn’t know how to reserve space for an image with max-width: 100%; height: auto;. That meant the janky reflow of the image loading was back, without a simple generic solution to solve it.

That never sat right with me, so for today’s posts I’m going to explore the possibility of a generic solution, and what browser vendors are planning to do to make this easier.