CSS Layout News - Issue 338

Is this thing on ...?

It's been a long hiatus in the publication of this newsletter. However, it feels like a perfect time to own my own content and use my channel to help share the content others are creating. There is also more genuine CSS Layout News happening than ever before. I won't need to be digging around to find something to share.

As it's been a long time, if you are no longer interested in CSS, layout, or have given up on the web entirely, please do hit the unsubscribe button.

Rachel Andrew (@rachelandrew)

News

Interop 2023

The last time I published a newsletter, Interop 2022 had just been announced. That effort had some success, and we're back with Interop 2023. For layout, I'm particularly happy about container queries, however all of the focus areas will improve interoperability and make it easier to build for all browsers.

New to the web platform in January

Despite failing to publish this newsletter, I have managed to get a monthly post out of the door to share what's landing in browsers. This is the latest edition, sharing features landing in stable and beta browsers during January.

CSS initial-letter landing in Chrome

From Chrome 110, shipping this month, the CSS initial-letter property is available. This has been prefixed in Safari for years, and is something I've often shown in demos and talks. I'm so happy to see it in Chrome too.

Learn

Animating CSS Grid

The grid-template-columns and grid-template-rows properties are now able to be animated in all major browsers. This enables some really interesting things, as this article explains.

Container Queries and Typography

The initial use cases for container queries tend to be to rearrange components, they can also be used for better control of typography within those components. This post demonstrates techniques for type that will better fit its location in your design.

Solved with :has(): Vertical Spacing in Long-Form Text

Interesting things to do with :has() seem to pop up constantly, here's a method for dealing with spacing between elements in long form text.

Learn Images

Responsive and performant images can be really hard to get right. This is our latest course on web.dev. Written by Mat Marquis, it aims to be a deep dive into everything you need to know to use images well on the web.

Interesting

The Web Almanac CSS chapter

Launched last year, I wrote the CSS chapter for the Web Almanac. I found it very interesting how so much WordPress showed up in the CSS data via classnames used. Also, just how slowly grid has been adopted. Thinking about grid adoption, was the basis of the talk I presented at An Event Apart last year, When New CSS Features Collide.