Articles by Brecht De Ruyte about accessibility| utilitybend.com
A new HTML feature, popover=hint, lets developers create hover-triggered popovers. This article is all about the accessibility on touch devices.| utilitybend.com
Learn to style HTML elements in this customizable select tutorial. Create beautifully categorized dropdowns, like a restaurant menu, using modern CSS.| utilitybend.com
I tried to tackle UI gamification with a Monster Hunter-inspired select element. This demo covers my approach to CSS, scripting, and accessibility.| utilitybend.com
This was CSS Day 2025: A personal story about the conference, facing fears, and finding joy in the web community. This is a heartfelt look at the talks, the people, and what makes CSS Day so special.| utilitybend.com
Articles by Brecht De Ruyte about ux| utilitybend.com
Articles by Brecht De Ruyte about html| utilitybend.com
Using sticky positioning in a customizable select! Combination of using :checked, top-layer functionality, and interpolate-size for an emoji picker with an open/close effect.| utilitybend.com
Articles by Brecht De Ruyte about general| utilitybend.com
Generate OKLCH color patterns from one base color the Oklchroma tool. Inspired by a talk at CSS Day, easily copy CSS variables.| utilitybend.com
The second part customizable select with CSS series. Highlighting anchor positioning to create a radial potion select element with just HTML and CSS| utilitybend.com
It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at...| utilitybend.com
Exploring customizable select elements. This series explores styling possibilities. The first article covers the history and provides a guide to building a custom select as a progressive enhancement. Styling selects with CSS for unique and fun experiences.| utilitybend.com
It’s Valentine's Day! As usual, I want to write about something I love, and this time it’s still highly experimental but something I am extremely excited about. Something new is on the horizon named CSS scroll-markers and it allows you to create a fully functional slider without the need of any JavaScript. Don’t believe me? Let’s take a look, shall we? Here is my first impression of creating a carousel with only CSS and some accessibility concerns as well.| utilitybend
It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte highlights two such features: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.| utilitybend.com
Revisiting the power of SVG filters for web effects like duotones and noise. Remembering how powerful and relevant these tools are to create unique visuals.| utilitybend.com
My end of the year article, no code, no demos, just a little reflection on the year spent and some New Year resolutions.| utilitybend.com
Combining anchoring, scroll-driven animations, container style queries, offset-path, and @property to create my yearly CSS Christmas card. Happy holidays!| utilitybend.com
Articles by Brecht De Ruyte about css| utilitybend.com
Brecht De Ruyte is a Belgian Front-end developer currently working at iO. Passionate about HTML, CSS, UI, UX and design| utilitybend.com
Animating from 0 to auto used to be a CSS headache. But now, interpolate-size makes it a breeze! This new property offers a pure CSS solution, no more JavaScript tricks needed.| utilitybend.com
As a GDE, I attended a conference on the Isle of Man. While it's a smaller community, their passion and dedication to bringing developers together were inspiring. We should support more of these smaller events.| utilitybend.com
Oh, how I wanted to write this title for some time! I have Googled these questions before when working with sticky positioning and scroll snapping. It looks like we are finally getting an answer to these questions in the form of CSS state queries and I have been eagerly waiting to play around with this since CSS Day 2023. In this article, I want to show a few first impressions and demos I created with state queries in CSS and Scroll Snap events in JavaScript.| utilitybend
The CSS Working Group (CSSWG) has recently introduced changes to the anchor positioning spec in CSS. I've focused on anchoring in previous articles and to maintain accuracy, I will be updating an older article (just this once). This article will highlight the specific name changes and their corresponding Chrome release dates.| utilitybend
Talk about CSS5: Help us define future CSS eras & feature sets with the W3C CSS-Next community!| utilitybend.com
Time for a bit of vacation, short rundown on CSS Day, Google I/O and Middlesbrough Front End| utilitybend.com
One thing I’ve learned over the last year is to deal with changes in explainers and specs and that naming things is hard. In this update on Invokers, I will cover the new syntax and the new name: Invoker Commands. Once again giving you some control over interaction with HTML from opening dialog elements to creating custom counter buttons and video controls.| utilitybend
Another year, another CSS Day. I’m always happy to return to Amsterdam for this occasion, It’s one of the things I look forward to every year. So naturally, I’m happy that iO still allowed me to go there with my training budget, and the least I could do, is write a summary of this event on the tech_hub.| utilitybend.com
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. But amidst this abundance, the modern CSS features we have today offer simpler and more flexible approaches without the added dependencies or abstractions. In this article, I demonstrate four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.| utilitybend
Wouldn’t it be cool if we could click on a button to open a modal with just HTML? How about those file input elements? Imagine that creating a custom play button for video controls would be an easy thing to do. How about custom counter buttons for a number input? This is where the idea of invokers comes in. It’s currently available behind a flag to play around with and it’s definitely one of the most exciting advances in HTML to look out for.| utilitybend
A few weeks ago, a cool little package was delivered to my home. When I opened it I couldn’t stop smiling, it was a Google Developer Expert certificate to hang on my wall. But why did this make me so happy? Well,... it’s all about being self-taught and believing that communities are important. In this (non-technical) article, I’d like to share some thoughts about communities, what they gave me, what I hope to return, and what scares me.| utilitybend
While experimenting with CSS, you sometimes discover a technique you want to do more of. This is one of those discoveries for me... I love how we can now animate clip paths on scroll with CSS. From animating an image into a star to creating Polaroid-like images on scroll. In this article, I’d like to demo some techniques we can use to create these interesting effects using clip paths, @property, and even container units to create visually pleasing scroll-driven animations.| utilitybend
While learning about web components a few months ago, I wanted to create my first (useless) little component as a package on NPM. In this article a little tutorial on how I created my first basic web component with LIT, Typescript, using an easy setup with Vite. I will be sharing how to do the setup, some of the ideas behind it, and some of the gotchas.| utilitybend
The year 2024 might be a big one for web components and I for one am excited about this. Truth be told - a few months ago - I barely knew anything about them as I thought they were just this niche thing floating around on the web. But a lot of buzz is being created. So I wanted to learn more about them. I can now proudly say I published my first (useless) web component on npm - a Valentines special - for-love element.| utilitybend
There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. In this mini-series I will be going around all the current length units in CSS with practical examples.| utilitybend
Browser support for @property nears completion, a great time to delve into some technical aspects of this CSS feature. While I've experimented with @property in demo settings before, I’ve never used it in a production environment. With the upcoming full browser support, let’s take a look at the inner workings and uncover some of the benefits.| utilitybend
This year has been a crazy ride, from my first appearances in public speaking to becoming a Google Developer Expert and speaking in Berlin. It’s time to reflect a little on the past year, write a little recap and have some time with family and friends to kick-start the year of 2024.| utilitybend
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.| utilitybend
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.| utilitybend
@starting-style enables transitions to and from display:none, and for elements entering the DOM. This makes CSS animations and transitions more convenient.| utilitybend.com
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
Animating elements while a user scrolls the page is a popular practice on the web. With scroll-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.| utilitybend
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.| utilitybend
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.| utilitybend
As we’re slowly entering the end of the year, it’s the perfect time for a little recap. I started this blog somewhere near the end of 2021 and continued this journey in writing about the web in 2022. Some important lessons learned, goals achieved and ideas for the future made.| utilitybend
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.| utilitybend
I’ve turned 35 years old and that gives me the excuse of playing the old geezer for a bit…, just for a day… maybe? Not a technical topic this time, just me reminiscing of what I miss of my early days of development, what I’m worried about, and how I see the future. Before I bore you with too many blasts from the past, let’s get those away right now.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
I purchased a Chromebook for my little coding projects. In the first part I wrote about the basic development setup. In this post, we're taking a bit of a deeper dive: installing git, node, filezilla, some browsers, Docker and updating the terminal on ChromeOS. So let's open the terminal and dive right into it.| utilitybend
A few months ago, I purchased a Chromebook for my little side projects. I'm used to working on a Macbook, but I wanted to work with something that has a different feel, to make my little creations on the side feel more relaxing, and less like work. I have gained a lot of love for ChromeOS. This will be an article in two parts. In the first part, I want to talk about the first experiences, my basic ChromeOS setup and enabling developer mode.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
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.| utilitybend
It's valentine's day and so the perfect time to write a love letter. This one is to all the CSS-developers out there. For those who love the cascade, pseudo elements and all the new nifty things entering the language.| utilitybend
CSS grid is a lot of fun and I find myself using it far more often than I used to. Goodbye to the Flexbox grid and hello to all things grid. Here are some of the fun things you can do with the CSS grid module.| utilitybend
As we're entering the last stages of 2021, I think it's time to add a little wishlist for the future of the web. Since accessibility is getting more (deserved) notice. I thought that this year might be a good time for an HTML wishlist.| utilitybend
I've been writing CSS in a SCSS environment for 8 years by now, that's a long time and since recently I started playing around with PostCSS. PostCSS has been around for some time, but I finally found the chance to dig in.| utilitybend
I've been hyped about the new container queries in CSS. The possibility to change the look & feel of elements based on the location they are presented instead of the viewport width will be a great addition to the front-end workflow.| utilitybend
Let's talk about sticky headers. They get used all the time and it seems that they are something we expect on a website. But is adding a sticky header the solution to our UX/UI problems, or just an easy fix?| utilitybend
There was a time when I was absolutely against every type of CSS library. The thought of using pre-defined class names gave me the shivers. Now, after working with them for some time, here are some of the thoughts on the matter.| utilitybend
You might remember the days when Masonry grids were all the rage. Every website wanted to have the Pinterest-inspired layout. Well overdue, but there is something in the works at the W3C.| utilitybend
My blog is live. And this is my first article| utilitybend.com
After following the evolution of the anchoring API for over a year, now that we have a definitive spec, I decided to write an intro to using Anchor Positioning| utilitybend.com