CSS

There is a famous document from the CSS Working Group that lists the historical mistakes in the design of CSS. It contains stuff like how box-sizing: border-box; should have been the default, which is why a lot of us still put that in starter stylesheets. Declan Chidlow took a step I’ve never seen anyone take […]

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

If you put your custom properties (tokens) for every component in an @layer, then overriding them is never a fight.

The attribute `hidden=”until-found” can be quite useful in HTML, but we’ll need another unexpected bit of CSS to ensure space is reserved.

You might think of the view() function as used in scroll-driven animations, but really it just pairs @keyframes animation with the current position of an element.

The WebKit gang did a good job with The Field Guide to Grid Lanes showcasing what kind of layouts are now achievable with display: grid-lanes;. Basically: Masonry layout, with arbitrary column widths, and proper tabbing order, is now progressive-enhanceable and HTML/CSS only.

With the `progress()` function in CSS we’ve got a new way to calculate the size for type based on the viewport without problems of the past.

The `rule` (and friends) CSS property allows us to draw markers (like borders) in the gaps between columns and rows (and flex items!)

Adam knows better than anyone, CSS knows about the user, device, variables, layout and more. But there is a little bit of information that CSS doesn’t have. Like what’s the current value of a range input exactly? What are the exact coordinates of the mouse? It’s not hard to pass over that information to CSS […]

View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.