10 NOV 2020

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

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.


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


An article about bidirectional scrolling patterns.


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


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


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.


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.

Enjoyed this article?

Join our free newsletter and never miss an update.


Related Articles