Skip to content

Open UI and the Popover API

Open UI logo

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 moreabout Open UI and the Popover API

Creating A High-Contrast Design System With CSS Custom Properties

Smashing Magazine

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 about Creating A High-Contrast Design System With CSS Custom Properties (Smashing Magazine)

Using best practices to create CSS scroll snapping tabs

Snapping finger with tabs

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. How should scroll snapping tabs behave when using keys? By reading some best practices, I believe I found an elegant solution.

Read moreabout Using best practices to create CSS scroll snapping tabs