Skip to content

Stylish holidays! Creating a scroll-driven Christmas tree in CSS

A christmas tree with text underneath it: stylish holidays

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.

Read moreabout Stylish holidays! Creating a scroll-driven Christmas tree in CSS

Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point

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.

Read moreabout Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point

We should all invest more in smaller developer communities, or at least, try to

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.

Read moreabout We should all invest more in smaller developer communities, or at least, try to

Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS

Three purple squares agains a pastel background, the middle square has some comic explosion lines on it and reads snap

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.

Read moreabout Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS

A spec update on CSS anchor positioning

A boats anchor agains a futuristic background with rectangle patterns, with text updated on it

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.

Read moreabout A spec update on CSS anchor positioning

It’s Time To Talk About “CSS5”

Smashing Magazine

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.

Read more about It’s Time To Talk About “CSS5” (Smashing Magazine)

Time for a little break - summer 2024

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.

Read moreabout Time for a little break - summer 2024

An update on invokers: Invoker commands in HTML

Open UI logo with text invokers below it

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.

Read moreabout An update on invokers: Invoker commands in HTML

This was CSS Day 2024 - the 10th edition

iO tech_hub

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.

Read more about This was CSS Day 2024 - the 10th edition (iO tech_hub)

Let’s hang! An intro to CSS Anchor Positioning with basic examples

A boats anchor agains a futuristic background with rectangle patterns

The CSS anchoring API is something that I’ve been following for at least a year now, and I’m happy to see that the first level is fully specced. Even though there are still some shortcomings that I’ll cover in this article as well, the available things look pretty solid and will help us a lot in creating some complex layout structures. Besides that, they are very much needed for the future of the HTML Popover API and stylable selects.

Read moreabout Let’s hang! An intro to CSS Anchor Positioning with basic examples