Issue 276
A container query-like solution with CSS math functions, detecting sticky items, :focus-within
News
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
Learn
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 | TimKadlec.com
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.