CSS Layout News - Issue 314

I booked a flight today. It's to get to a half marathon, not a conference, but it does look as if there is a tiny bit of hope that things might be improving. Perhaps we will all be able to meet up again. Until that time, however, virtual conferences are happening. I'm writing a brand new talk for the online Web Unleashed in October, CSS Layout from the Inside Out. It's good to be creating a new talk again, hopefully soon I'll be delivering one somewhere I can see your faces!

Rachel Andrew

News

2021 Scroll survey report

In April the Chrome team launched a survey to find out how developers were using scroll and touch action, and the problems that they were encountering. This post rounds up the results, and how this information will be used to improve scroll on the web.

Learn

Using Absolute Value, Sign, Rounding and Modulo in CSS Today

I'm not a math expert, but I really enjoyed this article from Ana Tudor. Ana explains the CSS math functions, explains how you can use them today despite lack of browser support, and gives some examples of why they might be useful to you.

A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

A screencast explaining how to implement a common layout pattern.

Conjuring Generative Blobs with the CSS Paint API

A fun, and informative article walking you through the creation of a generative blob worklet using the Paint API.

User preference media features client hints headers

The Sec-CH-Prefers-Color-Scheme client hint header is the first of a series of headers that allow you to find out about user preferences during request time, rather than once CSS has loaded. This means that you can, for example, inline the CSS needed to support the color scheme preference of a user. This benefits performance and avoids a flash of another color scheme while the preferred one loads in.

Writing great alt text: Emotion matters

So this is not layout, but I imagine you have to pop an image on a page from time to time. Writing great alt text is hard, considering how you can convey the emotion behind an image might be a good way to consider how to create an equivalent experience for folk who can't see that image.