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
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
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()
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
Unless you have no affinity with CSS at all, you should have noticed that new CSS features are skyrocketing like never before. How can we use these new playthings today? I wrote a miniseries about this on the iO tech_hub.
Read more (iO tech_hub) about Why you should be using new CSS features today
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
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
Fluid typography is getting a lot more popular, especially since the clamp() math function is available in every evergreen browser. But if we’re honest, it’s still a lot of mathematics to achieve this. You can use tools such as utopia.fyi, which are fantastic. But in large projects, it can get messy pretty fast. So let's make this easy with Sass.
Read more (Smashing Magazine) about Easy Fluid Typography With clamp() Using Sass Functions
My first article for CSS-tricks on how to create a watch face with a conic gradient Using custom-properties and a little bit of Javascript.
Read more (CSS-tricks) about Making a Real-Time Clock With a Conic Gradient Face (CSS-tricks)
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