CSS Layout News - Issue 325

Welcome to another late in the week CSS Layout News. It may be late in the week but there is a whole bunch of interesting stuff below.

I spoke at Web Unleashed this week, slides are here. This is a new talk, likely to go through many adaptions give it partly covers container queries.

Rachel Andrew

News

Chrome Dev Summit

The Chrome Dev Summit site and schedule are now live. I'll be running a CSS Workshop with a focus on flexbox and grid layout, and there is much more to register for. Places are likely to be booked up quickly.

Video: Improving CSS Architecture

In this video recorded for TPAC, Miriam Suzanne explains some of the new features being worked on, including Cascade Layers, Container Queries, and Scope. You can also take a look at an update from Adam Argyle on CSS Nesting.

Learn

HTML with Superpowers

This is excellent, a straightforward look at Web Components that doesn't immediately kick off with some complex-looking JavaScript. This talk also explains the somewhat mysterious Shadow DOM.

Expandable sections within a CSS Grid

An article explaining a nice technique, I also really enjoyed the back and forth regarding accessibility in the comments, a discussion which resulted in updates to the article.

Custom properties with defaults

Some thinking around how to create custom properties with defaults, useful for reusable components.

Alpha Paintlet

A Houdini Paint worklet to adjust alpha transparency.

Tools

Core Web Vitals checker

This is a great way to get a quick view on how well your site is meeting Core Web Vitals metrics without needing to set up tooling.