CSS

The website has the most control, since that’s what applies the CSS. But browsers also have a Dark/Light/System setting, and that can fall through to the OS/Device.

I’m such a :has() selector fanboy in CSS. We’ve covered it many times. But Bruce Lawson goes as far as to call it “The God Selector” because: [It] is omnipotent because it doesn’t require any structural relationship between the thing being checked and the thing being styled. In other words, you can select any element […]

This article explores creating a typographic effect that “reveals” text in an interesting animated way.

Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.

Good observation in Bytes: … new CSS-in-JS libraries are popping up like it’s 2017 all over again. Panda came out last summer, Meta open-sourced StyleX in December, Material UI released PigmentCSS last month, and Restyle just launched a few weeks ago. It’s likely that server-side rendering screwed up the original “batch” of these tools. That, and, ya know, just using CSS is […]

Setting text on a circle in CSS isn’t straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.

Michelle Barker’s technique for popover footnotes is great. Here we look at ways we could fight the content duplication. There are ups and downs.

What happens with a CSS @keyframe animation like this when called? There is only one “keyframe” there at 50%. So what happens at 0% through the animation? The scale property is… whatever it already was. And at 100%? Back to whatever it already was. Assuming the default scale of 1, it will grow the element […]

The experimental CSS function `calc-size(auto)` allows transitions from zero to a specified value. Animating elements from zero to their intrinsic size has long been desired by CSS developers.

Two months back there was a bit of a hubbub about masonry layout in CSS with Jen at Apple making a case and Rachel at Google agreeing those use cases would be great, but should be based on display: masonry; not display: grid;. Then: nothing. Web standards just move at the pace that it moves […]