Issue 345
I'm back with another collection of interesting things that the CSS community has been sharing. There are a bunch of really practical walkthroughs this week, which show how new CSS features are making common patterns much easier to achieve. If you are reading this on the web and would like to know when a new issue arrives, sign up here. I promise not to be a spammy spammer.
Things I've been reading
Ana Tudor shares the straightforward modern way to created non-rectangular boxes. However, the border-shape property and the round option for polygon() only work in Chromium browsers right now. Ana then shares other, complicated, ways to achieve the same.
I've often been asked about the gap above the first element in a multicol container, which is caused by a top margin on the element. There's now a way to fix that with the margin-trim property. This property is available for multicol in Chrome 155. As noted in the post, Safari does support margin-trim, but only for block layout at the moment.
Ahmad Shadeed shares how to align icons and labels. I love the live demos with highlighting!
This article by Brecht De Ruyte builds up to demonstrate how modern CSS now lets you build components that can adapt to the context they are placed in. A worthwhile read that really demonstrates how far we've come.
Bramus demonstrates how to use anchor positioning to animate grid items between placements on a grid.
Like the author, Vincent Bernat, I am a great fan of sidenotes. Here's a nice way to achieve them that uses anchor positioning.
Something to watch
Kevin Powell's talk from Smashing Conf in Amsterdam this year. This is a really nice walkthrough of what's possible with container queries today.
Just landed in browsers
Chrome and Firefox have now begun a two-week release cycle, meaning you don't need to wait long for new things to show up in stable these days. I'll highlight any notable layout things here. Since my last newsletter Firefox 156, Chrome 153, and Safari 27 shipped.
Safari 27 includes a huge amount of fixes, including those for flex sizing issues. This release also includes customizable select support, and support for the stretch keyword in box sizing properties.
The Chrome team are looking for feedback on single axis scroll containers, shipping in non-stable versions from Chrome 153 (Beta, Dev, and Canary).