Issue 303
A new way to learn CSS, unpacking feature queries, DevTools, browser flags, and CLS.
News
Issue 303
One of the things that has keeping me busy has just launched, take a look below at all the details about Learn CSS!
Plenty of other good stuff this week too, so whether you want some fundamental CSS knowledge, a detailed look at CLS, or to unpack how feature queries work, you should find something to read.
Rachel Andrew, CSS Layout News
Just launched: Learn CSS
Over the last few months I've been working (mostly as an editor) on this free course from Google, to help you Learn CSS. The majority of the writing was done by Andy Bell, the series based on the CSS Podcast from Una Kravets and Adam Argyle. Also on the team, and making the whole thing look great, were Rob Dodson, Jiwoong Lee, and Kayce Basques.
It's been great fun being part of this team putting the content together, and I think it will be a really useful resource.
Google I/O 2021
Google I/O is happening online right now, it's free and there is a bunch of interesting CSS stuff, which you can also catch up on with the recordings.
Learn
Support (Not) Unknown | OddBird
This is a really great write-up, and not just in regard to how we can test for container query support using @supports
, as it unpacks how feature queries work in a detailed way.
DevTools for CSS layouts 2021 edition
A good roundup of the current state of DevTools for CSS Layout.
Cumulative Layout Shift: Measure and Avoid Visual Instability | Calibre
Learn what Cumulative Layout Shift (CLS) is, and how to prevent it.
How to set browser flags in Chromium
For some of the new APIs we introduce in Chromium, you need to set a browser flag for experimentation. This article explains how to do this in the various Chromium derivatives like Google Chrome, Microsoft Edge, and others.
Interesting
Modern Blog Layout with CSS Grid
Vis the CodePen newsletter is this great layout, I just love the way the header scrolls.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.