CSS

TODS: “an open source typography and opentype default stylesheet” from Richard Rutter. I like the idea of slightly-opinionated stylesheets that do a bunch of things you might forget to do, or just as likely, don’t know you can do to begin with. There are loads of goodies in here including a slew of utility classes for […]

Imagine transitioning a bunch of items all set into ONE cell of a grid, then each having a unique animation when they move from that cell into where they would naturally fall on that same grid.

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.