Skip to content

This was CSS day 2023

CSS Day Speakers and lead organizers

Another year, another CSS day. I am not joking or exaggerating to say 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 more about This was CSS day 2023

The button case - Using custom properties for a smart button system

The button case - visual with code example

Recently, I’ve created a presentation named “so, you’re still not using custom properties?” In this article, I want to highlight a part of that presentation. Custom properties have been available to us for quite some time now. And creating a smart button design system is just one of the many things where they can shine.

Read more about The button case - Using custom properties for a smart button system

Chrome DevTools tricks that deserve a spotlight

Chrome devtools visual

A lot of developers use Chrome as their main browser and I’m one of them. There are a few tricks in Chrome DevTools that don’t seem to get enough attention. So for this article, I wanted to highlight some of the features that I love and actually use in DevTools, that some of you might not know about.

Read more about Chrome DevTools tricks that deserve a spotlight

Open UI and the Popover API

Visual open ui

If it pops, it belongs in HTML and CSS! Lately, I had a lot of fun playing around with this upcoming feature. The first version is being developed and it’s starting to look pretty good. It’s time to handle our basic popovers without the explicit need of JavaScript.

Read more about Open UI and the Popover API

For the love of scroll-timeline animations in CSS

CSS heart animated on scroll with CSS

Animating elements while a user scrolls the page is a popular practice on the web. With animation-timeline and the scroll() function available in Chrome Canary, we get a nice preview on how these scrolling animations in pure CSS will work. The perfect time to create some demos and play around with it.

Read more about For the love of scroll-timeline animations in CSS

We've only scratched the surface with :has()

Swirly pagination animation with :has() in CSS

The :has() pseudo class is really a powerhouse. There are so many cool and amazing demos being released everyday showing how it can solve everyday problems and how it can replace actions we did in JS for years. In this short article: Some extra things I look forward to when playing around with it.

Read more about We've only scratched the surface with :has()

Creating A High-Contrast Design System With CSS Custom Properties

High contrast design system css custom properties

Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to the web that will make creating contrast a lot easier. But even though CSS functions such as color-contrast() are only available in Safari behind a flag, we can already do a lot to create contrast in an easy way by using custom properties.

Read more (Smashing Magazine) about Creating A High-Contrast Design System With CSS Custom Properties

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time.

Read more (CSS-Tricks) about Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Practical uses of the :has() relational pseudo class

has() - The new relational pseudo class

The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.

Read more about Practical uses of the :has() relational pseudo class