Issue 291
Images, shadows, tabs, and Intersection Observer.
News
Issue 291
I didn't get time to move this list to the new platform last week. I had my final Smashing Layout workshop to do, which consumed a bunch of time. Moving a large email list always seems somewhat perilous, one false move and you send TEST to 11,000 people. Hopefully I'll get it sorted this week.
Speaking of workshops, I'm planning some new ones. I have a bunch of ideas, but would love to know if there are things you would love to see me workshop. What would be most helpful for you to learn? What would your boss like you to learn? Drop me a line and let me know.
Rachel Andrew, CSS Layout News
Firefox 86 for developers - Mozilla | MDN
Firefox 86 lands today, only a couple of little CSS changes this time. With list-style-image accepting any valid image type in Firefox, you can now use a gradient for a bullet in all browsers. I'm not 100% sure why you would want to, but it's always nice to have options.
Learn
Getting Deep into Shadows | CSS-Tricks
This is nice because it explains how and why to use shadows, not just technically how to add a shadow.
Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers – Ben Frain
A post explaining how to use Intersection Observer for this task. I like the fact it references the way we used to do things. How often do we reach for a technique because we've done it a million times before, without checking to see if the web moved on a bit?
Maximally optimizing image loading for the web in 2021
Some excellent tips here, plus I like the progress indicator at the top of the page!
Barebones CSS for Fluid Images—zachleat.com
What is the best way to make an image fluid?
Building a Tabs component
A guide to building a tabbed component, there is also a video version of this tutorial if you prefer.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.