border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).

This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.

Demo: codepen.io/una/pen/ByzY...

My favorite part of @nerdy.dev's customizable select is the sticky section headers 😍

nerdy.dev/nice-select

Finally solving the tooltip arrow usecase with a new CSS property called border-shape

⚠️ WIP early-stage API, timeline TBD, more info coming soon

But it brings a lil tear to my eye to see this working, border & all 🥲

This demo uses anchored container queries + border-shape + a little animation

You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed?

The solution is simpler than you think.

With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳

I've also been looking at the intersection of scroll animations with scroll-state(scrolled)—another feature I'm stoked about 🙂

(working on a blog post)

With no JS, you can detect scroll direction! Combined w/scroll-driven/triggered animations = more natural control of element-viewport interactions

I got nerd-sniped by @bram.us and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers.

PRETTY COOL IMO!

Link (needs Canary + experimental-web-platform-features flag): codepen.io/una/pen/ZYWP...

🚨 PSA: CSS Anchor positioning

Translation on anchor elements is now respected by positioned elements in Chrome 144+

I know this was quite frustrating if you ran into it!

chromestatus.com/feature/5201...

The joy of CSS is that it doesn't error your application out, it just ignores the unsupported line.

*whispers* corner-shape 🤫👂

🟢 round
🪏 scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻‍♀️ superellipse

*Pass it on*

codepen.io/una/pen/PwNo...

Did you know: you might be able to change the style of the caret in CSS soon?

See caret-shape and caret-animation in action

(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)

codepen.io/una/pen/MYKL...

There are 2 new pseudo classes landing for scroll-markers: :target-before and :target-after

:target-current {
background: black;
}

:target-before {
background: lavender;
}

:target-after {
outline: 1px solid gray;
}

Lands in Chrome 142 (stable in 2 weeks)

Such a fun talk about web fonts! #nordicjs @nordicjs.com

To do this with the (upcoming) interest invoker API, it's 1 line of code:

.parent:has(:interest-source) button {
interest-show-delay: 0s;
}

You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).

codepen.io/una/pen/LEpw...