Brecht

So here's a fun one. You know the "hidey-bar" pattern: header hides when you scroll down, reappears when you scroll up? CSS can do that now with scroll-state(scrolled). And scroll-padding makes sure anchor links don't get buried behind the header.

Except... clicking an anchor doesn't trigger scroll-state. The header doesn't know you just navigated. scroll-padding reserves space for a header that isn't there. Everything goes out of sync.

I filed a CSSWG issue about it: https://github.com/w3c/csswg-drafts/issues/13787

🚀 A little while ago, I released an article on my blog redesign as a progressive enhancement. A few people DM'd me after that, asking for more info on the architecture. Well, it sure isn't perfect, and I'll surely tinker more on it, but I wrote about how I did the new CSS Architecture 🤓
https://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign

🚀 I always talk a big game… “you can do this as a progressive enhancement.” Time to put my money where my mouth is! 💸
In recent months, I’ve updated my site with a range of new features. It is rock-solid across all modern browsers and is finally live! With a story 📖: https://utilitybend.com/blog/putting-my-money-where-my-mouth-is-a-redesign-built-on-progressive-enhancement

🚀Do we like scroll-driven animations? yes! Do we want scroll-triggered animations? Also yes! Would it be cool to combine them? Ow hell yes! And that's just what I did in this year's Valentine's article, enjoy! ❤️❤️

It's quite lengthy, but also contains some hot tips 🔥

https://utilitybend.com/blog/css-animation-triggers-playing-animations-on-scroll-without-scrubbing-its-a-match

@brammm@phpc.social on refactoring with rector!

🚀 Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries. In Chrome 144, this has gotten a little update, so I thought it to be a good time to revisit. #CSS has once again gotten the keys to the state-machine, and it's fantastic!
https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries

🚀 I didn't think I'd start the year with another demo on customizable select, but people should know about the upcoming things. The customizable multiselect might still be a bit further down the road, but the size attribute updates should be shipped with Chrome 145.😍

https://utilitybend.com/blog/an-update-on-customizable-selects-the-multiple-select

🚀❄️ Yep, another "holidays" blog article. As tradition, I always try to create a little "happy holidays" card as well, with something new and shiny in CSS. In the past, I did scroll-driven animations and masks, but this time, the corner-shape property in CSS. Happy Holidays, ya'll 🎆

https://utilitybend.com/blog/css-corner-shape-books-talks-and-happy-holidays

I've been working a bit with Tailwind lately, and without jumping into a rage article, I took some time to gather my thoughts. It's not my favourite tool, but why? Here is an honest article on that:

https://utilitybend.com/blog/why-tailwind-is-great-why-you-might-be-missing-out-and-why-it-isnt-for-me

Barbecue, D&D, and UI. This episode is packed with my favourite things. But one thing I'm extremely happy about is that @shoptalkshow@front-end.social talked about <rangegroup> from #openui. Thank you for the nice words as well! It might be a long journey, but every helping hand is welcome :) I'm not a browser engineer, just someone who is sick of seeing hacky, inaccessible solutions for this. We can do better.

Watch the episode here:

https://www.youtube.com/watch?v=rx3gQkRZ4PA

🚀 I made a holiday wishlist for DevTools in November! Because I can 😀 What's the thing you'd like to see to simplify your CSS/layout debugging?
https://utilitybend.com/blog/5-css-debugging-features-i-want-to-see-in-chrome-devtools-holidays-list

#Chrome #DevTools #CSS

🚀 There should be a native way to have more than one thumb on a range slider. For this, I need your help. I created a starting point and would love you all to talk about it and give some feedback. I am not a browser engineer, and my hope is that this gets picked up by people who can help this move forward. It still has a lot of room to grow. Let's slide! 🛝 👍

https://utilitybend.com/blog/a-native-way-of-having-more-than-one-thumb-on-a-range-slider-in-html

🚀As a case study, I tried to recreate the famous Guess Who game with built-in AI and the Prompt API. It was an exciting experience, to say the least.

My heart is at CSS & UI, and always will be. However, I do love to experiment with a variety of (web)technologies 😄 Read all about it at Chrome for Developers

https://developer.chrome.com/blog/ai-guessing-game

🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease.
I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨

https://utilitybend.com/blog/styling-siblings-with-CSS-has-never-been-easier.-Experimenting-with-sibling-count-and-sibling-index