CSS

We just looked at how “animate to auto” (e.g. transition from a fixed value to a keyword like auto, max-content, etc.) is “opt-in” in a sense. You have to use interpolate-size: allow-keywords; to make it work or use a function like calc-size(), neither of which you accidentally do. This is because research showed that it […]

With CSS’ `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.

Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.

Ahmad Shadeed on CSS display: contents; — a feature that makes the DOM pretend that element just isn’t there (but it’s children are). Anything you use it for requires specific accessibility testing, but it can be quite useful. There are lots of use-cases here many of which boil down to “sometimes I want all these […]

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.