Have you run into a situation where you need the padding of one element to align with the padding of another element? It’s a common debacle, especially when a page layout is set with global padding? In this article I demonstrate that issue with a full-width slider component that breaks out of the main page container using a couple of techniques to keep it visually aligned with other elements on the page.

Read more about CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study (Smashing Magazine)

From layers and specificity to nesting, from HD color to (scroll) animations. If there is one thing that makes me keep using Chrome as my default browser while developing, it has to be the DevTools and the information we can find about them. As we’re slowly entering the last part of the year, I thought a cool roundup of new CSS debugging tools would be a great article. Let’s dive into it.

Read moreabout Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024

One of the frustrating things when animating elements was not being able to transition to and from display none. Related to that, it also wasn’t an easy feat to use transitions for elements entering the DOM. In Chrome 117 we have the release of @starting-style, which will make animating or transitioning those cases a lot more convenient.

Read moreabout Animations and transitions from and to display none with @starting-style

I'm extremely happy to announce that today, I've officially joined the Google Developer Expert program. I'm looking forward to the opportunities it has to offer such as expanding my own horizons as well as providing some support for other developers. An interesting step to take for the future of helping out the developer community.

Read moreabout I'm officially a Google Developer Expert

A full evergreen browser support for CSS subgrid is just around the corner. Time to have a look on how we can create some interesting implementations in our design systems. This article will be focussing on grid-template-rows with subgrid.

Read moreabout Grid ideas: Creating a CSS subgrid utility class for rows

It's been an eventful first half of the year with giving my first presentations, writing a lot of articles, learning a bucketload of new CSS and following along with Open UI. It's been great fun and I do these things with a passion, but even so, it's time for a good break.

Read moreabout Recharging batteries - Taking breaks is important

Scroll Driven Animations are set to be released in Chrome 115, giving us the chance to animate elements based on a scroll instead of time, increasing our toolset to create some fun interactions. I’m sure many great tricks and articles will be found, as this feature opens a lot of possibilities.

Read moreabout Scroll driven animations in CSS are a joy to play around with!

If you love CSS, you've probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements.

Read more about Going beyond constants with custom properties (iO tech_hub)

Another year, another CSS day. I'm not joking or exaggerating that this conference has and always will be one of my highlights of the year. Welcoming, top speakers accompanied with just totally geeking out with other CSS people around food and drinks. This was CSS day 2023 - a short summary.

Read moreabout This was CSS day 2023

Thanks to the Open UI working community group, there's a new element on the horizon, the selectlist, that will make styling this type of form control a whole lot better. Let's use this element to creating a pattern that you would never have thought possible with CSS alone - a radial selection menu.

Read more about Advanced Form Control Styling With Selectmenu And Anchoring API (Smashing Magazine)