New blog post: A custom `--light-dark()` function in CSS that works with any type of value _(not just colors!)_ in just 3 LOC

> CSS Custom Functions (`@function`) + CSS `if()` + CSS `color-scheme()` = one sweet combo!

https://brm.us/--light-dark()

Liskov’s Gun: The parallel evolution of React and Web Components

https://www.baldurbjarnason.com/2024/liskovs-gun/

This is a bit of an experiment. Probably the longest essay I've published directly on my website. 🙂

I see a lot of buzz about `font-size-adjust` today.

Let me explain to you how it works in 4 minutes:
https://youtu.be/uadAfE6cAoM?t=1338

Inspired by a @kevinpowell video - I'm playing with calc() inside the condition of a #css container query:

When 3 * 32ch columns fit…

(inline-size > calc(32ch * 3))

Then jump from 1 to 3 columns…

repeat(3, 1fr)

(You can add gaps to the math if you need – I show it in the codepen. But that level of precision feels like overkill for most situations.)

As I recall, container variables are also specced to resolve in cq conditions, but no one has implemented it?

https://codepen.io/miriamsuzanne/pen/VwRGBeV?editors=1100

What a fantastic way to present #UIDesign history: The Evolution of the Scrollbar

Interactive scrollbars you can actually play with from the very first (Xerox Star, 1981) until 2015.
https://scrollbars.matoseb.com/

h/t @karger

Realization: CSS Nesting also allows you to basically do "else" clauses in selectors.

complex-selector {
if-styles;

:not(&) {
else-styles
}
}

(if you’re wondering what this code is for, it’s for a bookmarklet to show element boxes for educational reasons)