Issue 300
We made it to issue 300. This week: custom properties, CLS, breakpoints.
News
Issue 300
It's issue 300! I've been sending a weekly CSS Layout News since the 4th August, 2015. If you need a reminder about how very long ago that was, the issue led with the release notes for Chrome 44! I announced Grid Layout shipping in Firefox in issue 84 and Chrome in issue 85, over 4 years ago.
I noted last week, as I was preparing an update to my talk on new things in CSS, how quickly things are shipping into browsers now. Things that I included as coming soon features, have landed in browsers by the time I give the talk again, and new things have started to show up. I started this newsletter to help promote the upcoming grid spec, and it's very cool that there are still plenty of new layout and layout-adjacent things happening to let me make it to issue 300—and beyond!
Rachel Andrew, CSS Layout News
Learn
Slides and resources for my talk at Web Directions hover, a conference just about CSS.
An article about some breakpoints that you might want to pay a little more attention to.
Another excellent article from Adrian, covering a design pattern that many of us will have had to deal with at one time or another.
Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them.
After reading the earlier short primer, here's a complete guide to custom properties to help you take the next step!
Chris takes a good look at the upcoming color-contrast() function.
A solid guide to Cumulative Layout Shift (CLS). This is a measurement of the annoying experience of a layout shifting around as you try to use it, leading you to click on the wrong things or lose your place.