Issue 292

Welcome to another issue of CSS "is it really Tuesday again?" Layout News. There is quite a lot of actual news this week, with some interesting stuff coming to browsers and DevTools.

I also have a whole bunch of online conference news. Upcoming in the next few weeks I have three events that I'm excited about, and different talks for all of them because I need more things to do.

• Axe-con, where I will be talking about content re-ordering and Grid.
• An Event Apart, with a brand new talk about how CSS works today.
• hover, where I will be talking about the display property.

If you have an upcoming online event or meetup and would like me to speak or to run a workshop, let me know. With an optimistic eye to the future I'm happy to pencil in hopeful in-person/hybrid dates too. I can imagine that within the UK is going to initially be more possible than elsewhere for me, but we shall keep all things crossed that the vaccines work and some sort of normal life can resume.

Rachel Andrew, CSS Layout News

Release Notes for Safari Technology Preview 121 | WebKit

There are some useful fixes in Safari TP 121 for some grid bugs, and also support for aspect-ratio in Grid Layout. Hopefully these things will make it into Safari proper soon!

webkit.org

The new HTML popup element is in development

In the recent Weekly Platform news is a description of the new <popup> element which is in development in Chrome. I've seen mixed feelings about this, although it's such a common UI feature that having a built in method which has default accessibility seems a good way to avoid everyone creating their own with varying results.

css-tricks.com

What's New In DevTools (Chrome 90)  |  Web  |  Google Developers

There are some nice new Flexbox tools coming in Chrome 90. I think these will be great to help people learn how flexbox works in addition to making debugging easier.

google.com

Hiding Content Responsibly | Kitty Giraudel

All the possible ways to hide content and a quick summary for each explaining how accessible they are and when they should be used.

kittygiraudel.com

The Clearleft Podcast: Accessibility

Accessibility is on my mind a lot this week as I am putting together my talk for axe-con and so here is a timely episode of the Clearleft podcast. Find out what it's like to use a screen reader on a website with Léonie Watson, and hear the thoughts of Laura Kalbag and Cassie Evans on designing while considering all users of your site.

clearleft.com

Diving into the ::before and ::after Pseudo-Elements / Coder's Block

Lots of information and demos of using ::before and ::after.

codersblock.com

Glassmorphism CSS Generator

A generator to create the "frosted glass aesthetic" which combines a partially transparent background with backdrop-filter to create the effect.

glassmorphism.com