CSS Layout News - Issue 316

Another week, and some more interesting layout adjacent things to report, including some interesting DevTools features, and a proposed new web platform feature to enable page transitions.

Rachel Andrew

News

Smooth and simple page transitions with the shared element transition API

I've put this under news, as currently, it is something that is at the proposal stage, but does have an implementation behind a flag and in an Origin Trial in Chrome. As such, it's a perfect time to test this functionality if it is something you would like to be able to use. The API provides a way to do page transitions on the web.

CSS Container Queries Chrome DevTools support

Also, in the world of the experimental is support for container queries in Chrome DevTools. I am a fan of the approach of shipping the DevTools along with new web platform features, so this is great to see.

Learn

CSS Grid tooling in DevTools

An in-depth look at the CSS Grid features in Chrome and Edge DevTools.

Sentence Forms

A very detailed post about form elements placed inline in a sentence. These raise various accessibility problems, which you can find out about in the article.

A guide to designing accessible, WCAG-compliant focus indicators

Staying with accessibility, a post from Sara getting into the detail of designing focus indicators. This is a detailed look at the subject, with loads of practical advice.

Interesting

Building a Cool Front End Thing Generator

I've linked to quite a few of these generators over the years. They can be a great way to learn how syntax works. This article explains how to create your own generator, based on the creation of an Animated Background Generator.