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.

mozilla.org

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.

css-tricks.com

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?

benfrain.com

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!

industrialempathy.com

Barebones CSS for Fluid Images—zachleat.com

What is the best way to make an image fluid?

zachleat.com

Building a Tabs component

A guide to building a tabbed component, there is also a video version of this tutorial if you prefer.

web.dev