CSS Layout News - Issue 339

For work, one of the things I keep track on are features that are becoming interoperable, and available in all three major engines. We've begun a series celebrating those web platform wins, as it's easy to miss them when they happen, and make assumptions that a feature isn't fully supported. Initiatives such as Interop 2023 help to speed up interoperability, however it's exciting to see how many features land cross-engine pretty quickly these days. Speaking of which, Firefox 110 is shipping tomorrow, which will mean Container Queries is available in all three engines. That's definitely something to celebrate!

Rachel Andrew (@rachelandrew)

News

Chrome 111 Beta

There are some exciting features in the latest Chrome beta, including View Transitions, new root CSS font units, and a whole stack of color things—the color-mix() function, and new color spaces and functions.

Safari Technology Preview 163

Here's an interesting development, Safari Technology Preview includes the CSS Grid Layout masonry functionality from CSS Grid Level 3. I wrote about this in 2020, when it landed in Firefox Nightly, but there has been little movement since. The release also includes support for the leading-trim property.

Learn

LayoutNG block fragmentation

Fragmentation is what happens when content is broken into fragments. This happens in multiple-column layout, and when printing a document, when the contents on one block container is too large to fit inside a column or page. There were a number of issues that were impossible to fix in the old engine, and this article explains how fragmentation has been rewritten to fix old issues and enable new things in the future.

Different Ways to get CSS Gradient Shadows

A rundown of ways to achieve gradient shadows for elements with transparent and non-transparent backgrounds.

100 Days of More or Less Modern CSS

Manuel Matuzović wrote a post about CSS every day for 100 days. It's an impressive achievement, and there are lots of interesting things to explore in the complete list of posts.

Building a lightbox with the dialog element

The <dialog> element can be used for any kind of overlay content, this post walks through creating a lightbox feature.

Tools

clamp() calculator

A tool for calculating viewport-based clamp() values.