Issue 345
'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
Non-rectangular shape with border and rounded corners
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.
Remove start and end margins with the margin-trim property
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.
Better Icon and Label Alignment
Ahmad Shadeed shares how to align icons and labels. I love the live demos with highlighting!
Container style queries and advanced attr(): rethinking how to wire up my components in CSS
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.
Animating CSS Grid Layouts with CSS Anchor Positioning
Bramus demonstrates how to use anchor positioning to animate grid items between placements on a grid.
Sidenotes with CSS anchor positioning
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
Video: Smart Layout Patterns with Modern CSS
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).
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.