CSS

Selecting the *next* element in CSS can be done easily with the + combinator. Selecting the *previous* element used to be impossible, but now can be like :has(+ .el), and can be extended in either direction.

Will Boyd covers how there is an infinity value baked into CSS. Never lose a z-index battle again, heh. I enjoyed little tidbits like how you can’t animate to infinity because… … there are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the […]

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.

You can limit how far the background-image of an element applies by using background-clip. That means you can apply *different* backgrounds to, say, the padding and border.

Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

Syntax highlighting code on the web happens like coloring any other text on the web happens. You wrap the bits of text you want colored uniquely in some element, probably a meaningless <span>, then select that in CSS and apply a color. Ideally, the span-wrapping happens server-side so client-side JavaScript isn’t tied up doing something […]

CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned […]

Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.