Skip to content

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 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

Introducing a Mini Static Thingy Wingy

A Mini Static Thingy Wingy

The world is full of frameworks and content management systems, we’re very spoiled when we want to create an application, but sometimes, you just need something static, simple and fast, so I created a Mini Static Thingy Wingy.

Read more about Introducing a Mini Static Thingy Wingy

CSS Day 2022: A small recap

Visual

After a long break because of Covid-19, CSS Day is back. In a new location at the Zuiderkerk in Amsterdam. Once again trying to create the perfect line-up for everything design and CSS, and boy, they delivered just that.

Read more about CSS Day 2022: A small recap

The details element, collapsing content without the hassle

The details element styled example

Some HTML5 elements seem to have the tendency of not being picked up by developers. Although widely supported, we still seem to use collapses with the use of a JS library instead of using a native element. In this little post, I want to highlight the details element a bit.

Read more about The details element, collapsing content without the hassle

A lot of power with little JavaScript, the HTML dialog element is here

Two people having a <dialog>

With Safari (15.4) being one of the last to implement the dialog element, a lot of browsers have great support for this element.. Goodbye to huge JavaScript libraries and welcome to the native HTML5 <dialog> element. This is beauty and simplicity on the web in its purest form. It’s accessible, customisable and most of all: easy to use.

Read more about A lot of power with little JavaScript, the HTML dialog element is here

Using best practices to create CSS scroll snapping tabs

Accessible scroll snapping tabs visual

Scroll snapping is hip and while we all have styled numerous sorts of tab panes and scroll boxes, I had an idea of combining them. What started out as a simple “scroll snapping experiment” turned out to be an accessibility study.

Read more about Using best practices to create CSS scroll snapping tabs