Issue 292
Grid fixes for Safari, Flex tools in Chrome, hiding content, and accessibility.
News
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
displayproperty.
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!
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.
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.
Learn
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.
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.
Diving into the ::before and ::after Pseudo-Elements / Coder's Block
Lots of information and demos of using ::before and ::after.
Interesting
Glassmorphism CSS Generator
A generator to create the "frosted glass aesthetic" which combines a partially transparent background with backdrop-filter to create the effect.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.