Skip to content

Issue 276

A container query-like solution with CSS math functions, detecting sticky items, :focus-within

Rachel Andrew
2 min read


Issue 276

It's Tuesday again and I'm writing this before heading over to help out with the last SmashingConf of the year. I'll be speaking tomorrow on new things in CSS, after I've updated my slides as new things keep happening that I need to include or update! Not a bad problem to have.

Loads of useful ideas and tips this week, a really nice collection of layout-related stuff to look through. Thanks to sponsor An Event Apart!

Rachel Andrew, CSS Layout News


The Raven Technique: One Step Closer to Container Queries | CSS-Tricks

This is incredibly detailed and I will be giving it a second read. How to use math functions in CSS to create container-query like solutions.

How to Detect When a Sticky Element Gets Pinned

This is an answer to something I have been asked a few times. Use IntersectionObserver to know when an item has become sticky.

Bidirectional scrolling: what’s not to like? by Adam Silver – Designer, London, UK.

An article about bidirectional scrolling patterns.

Designing User-Friendly Data Tables | UX Booth

Some tips for designing attractive and user-friendly data tables.

Grab your user's attention with the :focus-within CSS selector - DEV

A useful tip, demonstrating how to use :focus-within to highlight an element when any field in the form inside it is focused.

Chasing the Pixel-Perfect Dream · Josh W Comeau

An article about why spacing and consistency matters in design, and why designers sometimes get annoyed with developers who don't seem to care about this stuff. We've got so many more tools today to get this stuff right in CSS than we did in the past too.

Effective Skeleton Screens - Web Performance Consulting |

Some good thinking on the subject of skeleton screens, and how to use them well.

Our Sponsor

Articles, Links, and Tools from An Event Apart Online Together: Fall Summit

An Event Apart just wrapped up their Fall Summit conference, and it was a huge success! Attendees and speakers from around the world took in dozens of inspiring sessions full of deep insights into where we are now and where things are going next.

If you weren’t able to participate, don’t worry—we’ve got your back! Start by exploring the compendium of articles, links, tools, and other resources from 20+ experts.

Next, boost your skills and inspire your creativity with a Fall Summit On-Demand Pass.