matt makes stuff

log RSS/XML feed About 

Sensible Stylesheets

November 20, 2018

It’s kind of astounding how many websites set a font color but not a background color. My default colors are white on black, so a lot of websites end up falling back to defaults, which ends up looking like this.

Why would you go out of your way to specify that the font color is black without specifying that the background color is white? If you had just assumed default font color as well as background color, I’d be able to read this.

Screenshot of solid black screen with scattered blue links

Even gmail does it! This time it’s the opposite problem, they set background color but not font color.

Email folder screenshot

Either set both or set neither, y’all. It’s not hard.

<body style="background-color:white; color:black;">

Boom, done. You can override this with your stylesheets as needed.

Of course, hard-coding style settings like this isn’t ideal either, because it overrides “no style” settings. But it’s better to have the basic page style be readable than to have no readable options.

This is how I do it on my website: I use inline styling to make everything black, to mitigate the “flash of unstyled content” problem in Firefox. Then it loads the stylesheet, which includes color data for both font and background and overrides the inline styling. I don’t hard-code any style info.

HTML/CSS code from my website

The upshot is that if users don’t like my website layout, they can turn styles off and it’ll fall back to all their defaults for fonts and colors. Here’s a screenshot of my website with the basic style next to what it looks like with no style. None of my default colors are messed with.

This website with basic style

This website with no style

Now contrast this with gmail, again, basic style, followed by no style neither is readable.

Gmail with basic style

Gmail with no style

THIS IS NOT HARD.

Editorial note: A different article originally appeared with the title “sensible stylesheets”; the content of that post was lost due to a technical error, but it was fairly inane anyway. I had another article about stylesheets I wanted to write, and the title fit, so I re-used it. Apologies for the inconsistency.


back to log index | homepage