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
Understanding Display
Slides and resources for my talk at Web Directions hover, a conference just about CSS.
Don't you forget about me: overlooked breakpoints in responsive design.
An article about some breakpoints that you might want to pay a little more attention to.
Sortable Table Columns | Adrian Roselli
Another excellent article from Adrian, covering a design pattern that many of us will have had to deal with at one time or another.
Getting started with CSS Custom Properties - Tutorial - Piccalilli
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.
A Complete Guide to Custom Properties | CSS-Tricks
After reading the earlier short primer, here's a complete guide to custom properties to help you take the next step!
Exploring color-contrast() for the First Time | CSS-Tricks
Chris takes a good look at the upcoming color-contrast() function.
The Almost-Complete Guide to Cumulative Layout Shift
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.