CSS Layout News - Issue 307

It's still sunny in the UK, very strange. I'm sure we will be back to damp and grey soon enough. Despite being distracted by the ball of fire in the sky, I've read a few interesting things this week which I have included below.

Rachel Andrew, CSS Layout News

News

TablesNG fixing up the table things

This document covers many of the table rendering bugs fixed by the new table layout engine in Chromium. Among lots of other fixes, sticky table headers now work.

An Event Apart Fall Summit

The folk at An Event Apart have been great supporters of this newsletter, in addition to being kind enough to let me talk about CSS from their stage for many years. They have recently announced their online Fall Summit, I'm sure it will be an amazing line-up.

Learn

Equal columns with flexbox

This article does a good unpacking of how flexbox does sizing. It does however use a lot of words to come to the conclusion I've been explaining for the last few years. What flexbox is good at is taking a bunch of different sized things, and returning the most readable layout for those things. It avoids squishing a big thing into a small column, and leaving big gaps round a small thing. If you want to control the size of your columns precisely, use Grid.

Add a background to an open details element

A nice tip from Chris here.

CSS size-adjust for @font-face

There's a set of new descriptors for @font-face which can help prevent layout shift when a fallback font is replaced by a web font. Here is a good intro.

Design for Safari 15

I mentioned this as an upcoming talk last week, here is the video. While some of this talk is about changes to the Safari browser itself, much of it is about standard web platform features to improve your site on every browser.

Media Queries in Times of @container

The use cases for media queries even once container queries are a thing. Will this be the next flex vs. grid? I hope not.