I joked while talking with Adam Argyle on ShopTalk the other day that there is more CSS in one of the demos we were looking at that I have in my whole CSS brain. We were looking at his Carousel Gallery which is one of the more impressive sets of CSS demos I’ve ever seen. Don’t let your mind get too stuck on that word “carousel”. I think it’s smart to use that word here, but the CSS technologies being developed here have an incredible number of uses. Things that relate to scrolling interactivity, inertness, column layout, and more. Some of it is brand spanking new. In fact just a few weeks ago, I linked up the Carousel Configurator and said:

It only works in Google Chrome Canary because of experimental features.

Which was kind of true at the time, but the features aren’t that experimental anymore. All the features went live in Chrome 135 which is in stable release now for the world. Of course, you’ll need to think in terms of progressive enhancement if you’re looking to roll this stuff out to production, but this is real world movement on some huge stuff for CSS. This stuff is in the category where, looking a few years out, it’s a real mistake if carousels and carousel-like behavior isn’t built this way. This is the way of best performance, best semantics, and best accessibility, which ain’t gonna get beat with your MooTools Super Slider ok. Brecht is already bloggin’ about it. That’s a finger on the pulse right there.

What else is pretty hot ‘n’ fresh in CSS land?

• CSS multicol block direction wrapping by Rachel Andrew — The first implementation of of columns being able to wrap down instead of across. Useful.
• Can you un-mix a mixin? by Miriam Suzanne — Mixins are likely to express themselves as @apply in CSS eventually (despite being abandoned on purpose once?). We can already sort of do it with custom properties and style queries, which actually have the desirable characteristic of cascading. What will @apply do to address that?
• Feature detect CSS @starting-style support by Bramus Van Damme — Someday, @supports at-rule(@starting-style) {} will work, but there (🫥) is no browser support for that yet. There is a way to do it with the space toggle trick fortunately (which is one of the most mind bending things ever in CSS if you ask me). I feel like mentioning that I was confused how to test a CSS function recently, but actually since they return values, it’s not that weird. I needed to do @supports (color: light-dark(white, black) {} which worked fine. Related to @starting-style, this is a pretty good article.
• New Values and Functions in CSS by Alvaro Montoro — speaking of new functions, there are a good number of them, like calc-size(), first-valid(), sibling-index(), random-item(), and more. Amazing.
• A keyframe combo trick by Adam Argyle — Two animations on a single element, one for the page load and one for a scroll animation. They fight. Or do they?
• Container Queries Unleashed by Josh Comeau — If you haven’t boned up on the now-available-everyone @container stuff, it rules, and Josh does a great job of explaining why.
• A Future of Themes with CSS Inline if() Conditions by Christopher Kirk-Nielsen — Looks like if() in CSS behaves like a switch in other languages and what you’re doing is checking if the value of a custom property is equal to a certain value, then returning whatever value you want. Powerful! Chris is building something like light-dark() here except with more than two themes and where the themes effect more than just color.