CSS still gives me the warm fuzzies sometimes. We’ve gotten so many amazing CSS features the past few years, that each alone makes me happy. But when those features are combined, I’m often stunned and get thinking about how we’re only scratching the surface of what is to come.
Take a new demo by Adam Argyle “Responsive App Switcher”. If you happen to be an iOS user, you might recognize the look and feel from that interface where you swipe up and are choosing between recent open apps.
In this demo, Adam is using CSS grid layout, with the lesser-used grid-auto-flow to just let elements sit in a row and take the horizontal space they need. He uses scroll snapping so that each, let’s call them a “card”, snaps into a satisfying place. There is some bonus trickery with the snapping involving invisible cards at the beginning and end to make the final scrolling still have an elastic bouncy feeling. Things are sized with aspect-ratio and logical properties, and the overall container is literally a container such that sizing can be done with container units. The satisfying “shrink as it scrolls away” affect is done with scroll-driven animations, and styles are applied in layers just for good measure.
That’s a lot of modern CSS features.
Where my mind goes is: more! more! more!
Can’t you imagine each card being a blog post card instead? They could scroll a bit if needed, with a hero image that shrinks down with more Scroll-Driven Animations.
Can’t you imagine all the sizing and layout the elements inside each card being entirely handled by container units and container queries? Maybe some cards are differently sized depending on their importance and thus have unique layouts.
Can’t you imagine clicking on of those blog post cards and having View Transitions kick in and expand the card into a full-screen blog post?
Phew. We’re starting to see some stuff like that, but typically demos and less-so production websites. But we will soon. A lot of this stuff is perfectly in progressive-enhancement territory and support is probably better than you think it is and moving quickly.
I’ve got some great CSS links for you, many of which are aligned with the fancy and new I was just talking about.
- Ahmad Shadeed gets the ultimate gold ⭐️ star for CSS blogging this year with an absolute host of incredibly well-crafted articles on CSS concepts. If you need to bone up on CSS grid, which might be the thing you should prioritize the most (thx gold ⭐️ star CSS blogger Miriam Suzanne), Ahmad’s article on CSS Grid Areas is a great place to go. It’s arguably the most important thing to learn, as sure, it’s partially about setting up the grid, but that’s all in service of putting things on the grid.
- If that clicked with you, keep going with tighter focus Ahmad posts like The Gap, Designing Better Target Sizes, and Cap Unit.
- Josh Comeau is also a gold ⭐️ star CSS blogger, and I’ve probably already linked to it, but his Interactive Guide to CSS Grid is great. Then sometimes Josh brings his focus in tighter with stuff like Folding the DOM, which is a fairly simple interactive idea, with about a zillion little lessons tucked in there.
- Joining the gold ⭐️ star CSS blogging fray is Bramus, whose position at Google I think affords him some really front row access to important details on CSS features. I know about
overflow: clipthese days, it has a cool side effect where you can do directional overflow which we’ve never been able to do before. But Bramus points out that it’s quite useful combined with Scroll-Driven Animations, as it doesn’t create a scroll container and potentially screw up view timelines. - I’m totally slow clapping for this collection of 108 CSS loaders. They are all pretty fun and classy and honestly I wish more apps used fun loaders. Well, actually I wish they would just be faster.
- Allow me to leave you with this one. Kevin Powell, another gold ⭐️ star CSS’r, had a great talk at CSS Day about embracing complexity in certain CSS solutions. Part of the spirit is that CSS has been around a while now, and there are pretty established patterns for some things. When new solutions come around that sometimes do “the same thing”, they are seen as unnecessary or even overcomplications. If you ever get that feeling, it might be time to step back and be like… am I reacting to this because only because it’s less familiar? If so, it might be time to open the gate a bit wider at let the solution get more familiar.