I'm confused, in the above post it says "CSS scroll snap & scroll events", but scrollsnap events aren't part of interop?! github.com/web-platform...
13.02.2026 09:42
👍 0
🔁 0
💬 1
📌 0
I'm confused, in the above post it says "CSS scroll snap & scroll events", but scrollsnap events aren't part of interop?! github.com/web-platform...
Either referenceTarget or scroll-state container queries. Both are pretty hard to work around.
A technical diagram comparing three ways to style element corners using CSS variables `--r: 12px` and `--gap: 4px`. 1. "Border Radius": Standard support across all major browsers using `border-radius: var(--r)`. 2. "Corner Shape": Uses `corner-start-end-shape: scoop` and `border-start-end-radius` calculation, shown with Chrome and Edge icons. 3. "Border Shape": Uses a complex custom `border-shape` definition (likely CSS Houdini/Paint API) with extensive geometry calculations for shoulders and arcs, indicated with a Chrome Canary icon.
Modern CSS capabilities.
Since it uses `shape()`, i assume you could make the arrow less pointy now? And have it curve instead of being a triangle? Like macOS?
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
@jensimmons.bsky.social under "things that improve developers lives": can we have corner-shape in more browsers please? bsky.app/profile/haz....
The new corner-shape CSS property unlocks exciting new UI patterns.
corner-shape: bevel round;
border-radius: 1em 0 / 3em 0;
Are there any accessibility concerns?
#CSS `@custom-media` feature flags
create your own true or false media queries
nerdy.dev/custom-media...
Polyfill to the rescue: www.npmjs.com/package/@af-...
I feel like a whiny child when i say this, but why can't we have nice things in a timely fashion? #disappointed
Ik ken je situatie natuurlijk niet, maar verhuizen naar NL misschien overwegen waard?
I hope you have better luck with the angular team than I’ve had: some custom element related issues have existed for years at this point 🙁
Having native APIs for swiping on touch devices.
If it isn't on the agenda yet: `referenceTarget` aka cross-root ARIA. iirc there are still some issues to be hashed out?
I read at some point that EU iOS may be too small of a market to justify the necessary (technical) resources for such a browser. But isn't iPadOS now also required to allow different engines? Still too small?
They did, and i've seen presentations from Igalia on a hybrid WebKit+Chromium architecture for iOS. But for some reason nobody has shipped anything so far. Reasons aren't clear (to me).
Enjoy the diving :)
And this is Safari Technology Preview:
I think i've found a bug in Chromium though related to scroll-driven-animations and position: sticky: if the `animation-range` is small enough (`32px` in the video), Chromium has trouble actually scrolling. Safari on the other hand has not. First Chrome:
Turns out scroll-driven-animations are sufficient :)
Also i noticed you use `position: fixed` in your SDA example and not `position: sticky`. If you need sticky, then you probably need to use view-transitions?
When would you go for scroll-driven-animations (your "shrinking header shadow" example) and when for view-transitions?
I have this design and i'm thinking i could also do it with the Scroll Driver Animations API. Not sure what i should use.
The more I think about it, the more I think it’s not supposed to work that way: when you start scrolling the DOM of the header doesn’t change, so there is nothing to view transition to.
Link a view-transition to scrolling: a header animates when you scroll up/down. Is that possible yet? @bram.us @vtbag.dev
Sometimes that looks like waves and if you stare long enough, hey, the number 3!
Most developers I know are happy an exported SVG displays correctly on their page. They’ll never inspect the source to see how clean it is.
Teams should add a feature where it detects if you imitate an emoji, it shows that emoji as a reaction in the meeting.
@jensimmons.bsky.social Might i suggest bugs.webkit.org/show_bug.cgi... again? It's not just about animating closing popovers/dialogs. It is also *necessary* to fix them suddenly jumping to a different position when they exit the top layer, because a parent element is translated. Codepen included.
