Issue 347
Grid lanes, a blast from the past with table display, styling selects, and CSS Tricks is back.
Last week I was at W3C TPAC, featuring two days of CSS Working Group meetings along with other joint group meetings. It's always a great place to catch up with my friends who work on standards. Most other years I've had a long distance to travel to get to TPAC, as it moves around the world, this time it was fairly close in Dublin. Despite this, I was late arriving due to Storm Boelo cancelling the ferries across the Irish Sea. It was worth the trip, and you can read some of my thoughts on features we discussed later in this email.
Rachel Andrew
Things I've been reading
Another nice article from Ahmad Shadeed, working through a common layout requirement, and sharing his thinking as he came up with the solution. I like this form of article, especially when a less optimal solution is shown first. It encourages you to look more closely at what's possible rather that settling on the first pass.
Saleh Mubashar starts this post with a bit of grid lanes/masonry history, and then follows through with a tutorial on how to use the new specification. Grid lanes is currently only available in Safari, but support is underway in other engines too.
I appreciate Declan Chidlow's digging around in the past of web development, and this article looks at the uses of CSS display: table. At one point I wrote a book, that was entirely about the table value of display. I also used it heavily for the UI of Perch CMS version 2, which I built when flexbox was available in new browsers, but there were enough people using older browsers to require a fully implemented alternative.
While we are messing around with the value of display, Preethi describes using a semantic table and turning it into a grid layout. I'd played around with this back in 2016, and then stopped because it turned out this removed the table semantics. I believe this issue is now fixed in all browsers based on the note in Adrian Roselli's post.
Brecht De Ruyte showcases the CSS random() function with some playful demos on Smashing Magazine.
A brilliant set of examples for styling select menus from Ahmad Alfy. You can now use all your CSS layout skills inside a select menu, to help people understand what they are selecting.
My post describing two of the discussions we had in the CSSWG at TPAC. There's a tension between making CSS features generic, shared between different layout methods, and scoping them down to a single layout method. I've tried to explain why this is hard, with a couple of in-progress examples you might like to comment on.
Some good news
CSS Tricks is back, and now owned by Geoff Graham who was previously Editor in Chief for the site when it was owned by Digital Ocean. I'm thrilled for Geoff, and for the community, that this resource as found a new home. I've signed up as a member, and that's a great way to help support Geoff and his team. Members also get access to a lively CSS Discord server, so if you want to chat with CSS nerds that's another good reason to subscribe.
Just landed in browsers
Firefox 159 landed Scroll-driven animations, making these Baseline Newly available. Check out this fun timeline, showing the history of the specification.
Chrome 155 includes the margin-trim property on block and multicol containers, and Chrome 156 includes CSS random(), the subject of an article already linked in this issue.
Safari 27.2 renames the flow-tolerance property to fit-tolerance for grid lanes layout (display: grid-lanes), retaining flow-tolerance as a deprecated alias.