CSS

A “fan out” animation involves sequentially revealing items from a stack with a bouncy effect. By using CSS grid, we save quite a bit of fiddly positioning work.

There is an entirely web-platform way of injecting scoped CSS styles into the DOM. It’s requires zero tooling. Will we see it being used more, once Firebox support is there?

Alvaro Montoro has a great thread (and blog post) of a bunch of CSS value functions in “the first public draft of the CSS Values and Units Level 5 Module”. It can’t be overstated how powerful some of this stuff is going to be. The attr() stuff enables much more a powerful realtime HTML<>CSS connection. […]

After the big shakeup with masonry layout recently (Apple: Make it part of display: grid;! / Google: Make it display: masonry;! / Me: I’ve got questions and I’d rather see tabbing order issues fixed first), I was very keen to hear where it would go. It took 5 months, but we’ve got movement. The CSS […]

They are pretty similar in both look and functionality, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let’s have a look!

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.