Every year, I create a little demo right before the holidays as a CSS greeting card. This year is no different. To celebrate the end of the year and all those new amazing features that came into CSS, I decided to let myself go a little with new CSS techniques. A sort of recap of things I learned and put them in one little CodePen. This time, I’m combining scroll-driven animations, anchoring, and @property in CSS.

How can I animate from 0 to auto? I have a fixed width and want it to transition to the width set by its children. How do I do that? These CSS questions have been asked many times on platforms such as Stackoverflow, and I’ve certainly done some searching for those exact questions. I can’t count the number of max-width hacks or JavaScript solutions I’ve used to transition from 0 to auto. No more! I’m done, and for now, I’m going full progressive enhancement. In this article, I’d like to cover some of the benefits you get from adding the new interpolate-size property in your CSS Reset.

As a GDE, I recently traveled to the Isle of Man. It’s probably not the first place you would think of when talking about conferences, meetups, and developer communities in general. You’ll probably think about motor races in narrow streets and beautiful hills. This event was once again an eye-opener for me to realize we should probably try to do more for smaller community groups whether that is government sponsorships, or just doing that - maybe literally - extra mile as a speaker.

Oh, how I wanted to write this title for some time! I have Googled these questions before when working with sticky positioning and scroll snapping. It looks like we are finally getting an answer to these questions in the form of CSS state queries and I have been eagerly waiting to play around with this since CSS Day 2023. In this article, I want to show a few first impressions and demos I created with state queries in CSS and Scroll Snap events in JavaScript.

The CSS Working Group (CSSWG) has recently introduced changes to the anchor positioning spec in CSS. I've focused on anchoring in previous articles and to maintain accuracy, I will be updating an older article (just this once). This article will highlight the specific name changes and their corresponding Chrome release dates.

Have you ever wondered what happened after CSS3? The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3 way back in 2009 — and you can help.

The last few months have been crazy. I had a blast visiting conferences, speaking at meetups, and working on new things. But now it’s time to recharge some of those batteries and have some family time. In this article a little throwback of the last month or so and some of my holiday plans.

One thing I’ve learned over the last year is to deal with changes in explainers and specs and that naming things is hard. In this update on Invokers, I will cover the new syntax and the new name: Invoker Commands. Once again giving you some control over interaction with HTML from opening dialog elements to creating custom counter buttons and video controls.

Another year, another CSS Day. I’m always happy to return to Amsterdam for this occasion, It’s one of the things I look forward to every year. So naturally, I’m happy that iO still allowed me to go there with my training budget, and the least I could do, is write a summary of this event on the tech_hub.