Issue 339
Chrome 111 Beta and Safari Technology Preview 163. Block fragmentation, CSS Gradient Shadows, and a clamp() calculator.
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
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.
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
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.
A rundown of ways to achieve gradient shadows for elements with transparent and non-transparent backgrounds.
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.
The <dialog> element can be used for any kind of overlay content, this post walks through creating a lightbox feature.
Tools
A tool for calculating viewport-based clamp() values.