Custom Properties

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to 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.

Let’s look at using CSS as an efficient alternative to JavaScript for creating simple timers. We’ll use modern CSS properties like @property, @keyframes, and pseudo-elements with counter() values.