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...

Create a larger, invisible hit area around the element, making it easier to click without layout shift!

How? Use a pseudo element with `position: absolute` + `inset: -{value}px`

Demo to play with: codepen.io/una/pen/gbaWdmy

(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)