NEW
VIDEO
EVERY
WEEK

Also, your voice matters in this... if you agree with this, even a thumbs up on the issue can flag its importance.

scroll-padding reserves space for a header that isn't there. Everything goes out of sync and that's just bad UX in my book. Which is why I created this issue.

When using scroll-state (scrolled), CSS can track the scroll position, and scroll-padding ensures 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.

[css-conditional-5] Anchor fragment scrolls should update scroll-state(scrolled) direction to stay consistent with scroll-padding · Issue #13787 · w3c/csswg-drafts The resolution in #12394 categorizes anchor fragment scrolls as absolute scrolls, meaning they don't set the last scroll direction for state queries like scroll-state(scrolled: top) and scroll-stat...

I filed a CSSWG issue (read more about it in this thread...) github.com/w3c/csswg-dr...

It's a fun one... You know the "hidey-bar" pattern... The one where the header hides when you scroll down, reappears when you scroll up? CSS can do that now, but there is a catch... and I don't like it

Corner-shape: Buttons & Tags ...

Or use the new corner shapes feature for sharp bevel corners and notches 🤩
codepen.io/utilitybend/...

Turning a CSS Carousel into a Theme Switcher What happens when scroll becomes state? An exploration of a JS-free theme switcher powered by modern CSS primitives.

This carousel by @schepp.dev is such a cool idea! I saw the demo and totally missed that there was an article on that
schepp.dev/posts/turnin...

Finally sane accordion ...

Let's try and recreate the examples! This is one of them. codepen.io/utilitybend/...

😅 I think we can do the grid lane one as well.

Drawing of headphones in pastel Blue and pink on a e ink tablet. Music notes between the earpieces and stars around it.

Wakey wakey sketchy. 🥱

Before you blindly say 100px–200px–300px, hear me out: github.com/LeaVerou/blo...

(And if you really want it to be 100px–200px–300px then it’s simple: don’t type the --arg)

Brecht giving his talk, tv with a slide on next to him

Bramus giving his talk, tv with a slide on next to him

Got an interesting and entertaining evening of web talks thanks to these two speakers @utilitybend.com & @bram.us at the devs.gent meetup! ;)

Bramus pretending with slide view transitions: cranking it up to 11. In the front is the iO logo.

We're having a CSS and UI special at devs.gent and we're starting off with @bram.us who will be cranking view transitions to 11

Abusing Customizable Selects | CSS-Tricks Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.

A lovely article by @patrickbrosset.com wouldn't call it abusing tho 😂 I think I've made some worse experiences with the feature. css-tricks.com/abusing-cust...

Those custom properties are still some leftovers from the previous version, which I mentioned in the article. I didn't start from scratch. 😅 not perfect yet, but getting closer. Fixing the layer already tho ;) small oversight while moving things around.

😅 I might just do that.

Under the hood: a closer look at the CSS architecture behind the redesign | utilitybend A deep dive into the CSS architecture behind utilitybend.com: cascade layers, a three-tier design token system, light-dark() for dark mode, a modern reset, container queries, logical properties, and p...

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

The <rangegroup> POC now works with wishfull code examples! sweet xD brechtdr.github.io/enhanced-ran...

Try the latest <color-input> concept:

⚓️ anchor() progressive enhancement
🤖 workers for color compute
🙈 new animations & interactions
🎨 gamut boundaries, mapping, stretching
☯️ contrast scores
& much more

nerdy.dev/rfc-latest-c...

Been rocking with a Lumix gx80 four thirds camera for a day. Lovely little "on the road" camera 😊

Astro: How to Set Up More Powerful HTML Minification (in 31 Seconds) On improving HTML as well as CSS, JS, and SVG minification in Astro projects.

Astro: How to Set Up More Powerful HTML Minification (in 31 Seconds):

On improving HTML as well as CSS, JS, and SVG minification in Astro projects.

I've been waiting for _years_ on this feature.

Thank you Kevin for taking this one on, working with the CSS WG along the way, and congrats on shipping! 👏

(Next up: nudge Firefox and Safari to add this as well …)

una.im | Automated Accessible Text with contrast-color() Let the browser pick the most readable text color for any background with this new CSS function.

contrast-color() is landing in Chrome 147, making it Baseline Newly Available in all modern browsers

It takes any color value and returns either black or white: whichever provides the highest contrast against the input

Works great with generated colors, state changes, etc.

una.im/contrast-color

Top of projector screen with text : Front Side

This is clearly a front-end event. (The top of the projector states it)

Claudia introducing the fronteers meetup. Some people in front.

I was fashionably late, but happy to be at a @fronteers.bsky.social meetup again in Ghent.

🚀 I wrote a thing! on the progressive enhancement wagon once again. 😎

What the CSS corner-shape property unlocks for every day UI ⛶
It's not the first time I write about this feature... But it needed a design perspective. Seem like "I'm in love with corner-shape of you":

#frontend #css #ui #ux

DevTools never ceases to amaze me. Today I discovered the sensors tab to mimic timestamps in the US... Never really needed it before, but today I did, and I'm happy it's there 👌 #chrome #devtools

Ah! Another beautiful day teaching machines how to do my job by writing markdown files. ♥️

Putting my money where my mouth is: a redesign built on progressive enhancement | utilitybend A look at how utilitybend.com was redesigned using progressive enhancement with modern CSS features like view transitions, corner-shape, @property, scroll-state queries, and anchor positioning.

There is a bit of info on it in my last article, there really isn't much more to it. Or do you mean go more in depth? utilitybend.com/blog/putting...

Help me out:

I’m looking for examples / use-cases where you want to trigger an action _after_ a programmatic scroll(*) finished.

No need for an actual demo; a description of the use-case itself is good enough.

(*) Things such as `Element.scrollIntoView()` or `window.scrollTo()`.

Wide Golf course with a lake on the left side in the mist

Beautiful morning at the golf course.