Page transitions, DevTools for CSS Grid and Container Queries, accessibility, and build your own generator.
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.
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.
CSS Grid tooling in DevTools
An in-depth look at the CSS Grid features in Chrome and Edge DevTools.
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.
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.