Chris’ Corner: We Can Have Nice Things

It’s such a small, simple thing, but I’m very grateful that we’re getting “Gap Decorations” in CSS.

Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc).

I took a look at it the other day. Oh hey, that link is a lightly edited video I did from a stream I did. I’m enjoying the whole streaming thing. I’d love it if you came along for the ride:

• Chris Coyier on Twitch
• CodePen on YouTube

Part of what I like about it is that you don’t necessarily need to put grid items onto the grid to get the lines. Grid items on the grid might affect it, but it’s not required. That naturally leads on to think about styling grid areas without having to put HTML elements there to style. That’d be head, huh?

The Chrome blog has the post on it for whatever reason (does Microsoft not have a good blog for this?). The demos are pretty compelling in that blog post, showcasing some of the more exotic syntax possible.

Speaking of turning a stream into a nicer video and demo, I did the same thing for an idea I had about reordering list items with View Transitions.

• It started as a stream.
• I cleaned up the demo.
• I polished it a smidge into a video.
• I wrote it up as a blog post.
• Now I’m writing it up here in my column.

I probably won’t give every little thing I do on a stream the full content round trip like this, but I thought the result was super fun and cool and I JUST WANTED TO OK.

I’m also super envious of Bramus’ idea of If View Transitions and Scroll-Driven Animations having a baby, which is just an ultra-cool idea. He got some good mileage out of that idea, including a meetup talk. 💪

I’ve had Ryan Mulligan’s Scrolling Rails and Button Controls bookmarked for quite a while. He made a <scrolly-rail> web component that makes simple, nice horizontal scrolling elements. That includes scroll snapping, smooth scrolling, pagination controls, and more.

The timing of it is a little funny, as all this CSS Carousels stuff dropped very shortly after his work. Not that Ryan’s work was in vain, as it’s more cross-browser friendly than stuff like ::scroll-button() and the fancy features necessary for CSS carousels are.

But me, I’m so lazy into progressive enhancement, the last time I wanted to do a carousel, I went right for the fancy new stuff. That was for a template I was working on for our 2.0 Editor, which I streamed about, naturally.