posts
about
resources

CSS Surprises

I'm no stranger to spending weeks tweaking how webpages look instead of getting people to look at them. As much as I've been pushing myself to include sharing things as the final step of making them, I'll still indulge in frivolous detailing -- hopefully more out of delight than avoidance.

So here's some cool css I've learned while styling this little blog:

prefers-color-scheme

This one's simple, but being able to follow the user's light/dark preference is a nice touch.

prefers-color-scheme

prefers-reduced-motion

You can apply (or not apply) css depending on if a user has disabled animations in their system settings. How cool is that? We can add our silly blinks and bounces while being considerate.

The reference linked below explains how to change your device's preference, but you can check now by hovering over the title of this blog post (or tapping it on mobile). Nothing happened? Guess you have animations switched off.

prefers-reduced-motion

scrollbar-color

Exactly what it says on the label. Isn't that cute? I feel like some of us could be motivated to write more so our color-coordinated scrollbars get some screen time.

scrollbar-color

---

That's about it so far. There's an annoying 1px line in the top left corner that I'm not sure how to squish away, but it only really shows in light mode and I'm hoping to didn't notice.

Anyway... I'm wrapping up a 1400 word monster blogpost and wanted to dust this off first.

Toodles

email!
rss!
return to smol.pub/feed