CSS is hard.

friday, december 23rd, 2022.

My website uses simple HTML with just a light dusting of CSS for flavor. All of my favorite websites tend to be focused on content with appearance and theming taking a back burner. See Dan Luu and Devine Lu Linvega's websites for inspiration.

I've wrestled with the CSS bear sporadically since college nearly *cough* 20 years ago. Back then, it was Firefox vs. Internet Explorer vs. Opera, and you had to hack around their incompatibilities. They wouldn't render things in the same way, so you'd wind up having special CSS for each browser. Fixing something specifically in IE 6 was a common occurrence:

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

If I had a copy of some of my collegiate CSS handy, I'd share that. But believe me: it was abhorrent. It was 100% hand-coded, and it took me so very, very long to get that early-2000s top menu looking just right for the handful of browsers we had.

I've never been one to shy away from difficulty. At the time, I was also working on some interesting undergraduate research on the Tor network. I'd also cut my teeth on some pretty big team projects in Java, Smalltalk, and C++. Since then, I've been fortunate to spend my career solving difficult problems.

My career has been mostly in embedded software. Every now and then, I'll have a foray into web development. Once, I hacked together a SSH front-end using jQuery, WebSockets, and Go.

What I'm getting at is this: CSS is probably one of the most difficult things I've had to contend with. My hat's off to the folks that do front-end web development for a living. It's not too bad when you grab Bootstrap or a Jekyll theme off the shelf, but someone had to make that stuff!

Anyhoo— I just wanted something lightweight and easy on the ol' bandwidth. I host this website on a Raspberry Pi in my front room. So I went down a bit of a rabbit hole to figure out what suits my needs and aesthetic.

In case you've got similar needs, here's a few things I've run across that I've found useful:

58 bytes of css: make a single column of text at a readable width. Works well on mobile, too!
the system font stack: use nice fonts that are already installed on most machines. You don't have to serve up your own webfonts!
Safe web fonts: A list of fonts that are safe to use on many systems.
CSS Fonts: How likely Windows and Mac machines are to have a font already installed.
Mozilla's CSS docs: A thorough introduction to CSS.

That about sums up the useful things I have to share today. If you've got some neat tricks for lightweight websites (e.g. the 10 KB club), let me know!

EDIT: here's some additional links folks have sent me:

Until next time, be well :)