Callie

I want to skip the ua provided transition in this case, for example I'm just pushing a state update to the current url when my bottom sheet is open and similar to most native bottom sheets on Android I want users to be able to swipe back to close that (or any sheet or modal) on mobile web.

This is what I see on a recent chrome on a pixel 8 pro fwiw

On Chrome for Android I can't seem to stop the browser native back swipe UI even using the navigation API and intercept. On all but your mpa demos there is a double back animation that feels very jarring. Is this new or do you know how to signal that it's being handled for an spa?

Omg how incredibly sad and what a huge loss, I'm so very sorry to hear this.

Can't wait to try it, is this going out in 18.4 or 18.5? I had some simple cases where it was working well in TP but will also try more in the latest now.

I think I've finally nearly nailed my main mobile web / on screen keyboard woes with a sticky header and footer across iOS and Android! Update coming soon and hopefully I can share some of the takeaways.

VirtualKeyboard API question. I'm conditionally using the API and when the on screen keyboard closes, I set `overlaysContent=false`. Somehow that causes the environment variable for env(inset-keyboard-height) to never clear its value. Is this a known issue?

Curious if custom-media should have a container query equivalent. custom-container or such.

bugs.webkit.org/show_bug.cgi... is relevant, as is www.bram.us/2021/09/13/p.... developer.chrome.com/blog/viewpor... as well. But still even with all this, it's still challenging.

It's nearly 2025 and somehow working reliably on the web with the on screen keyboard across browsers is still so painful. The virtual keyboard API in Chrome is great but only if your entire site opts in. iOS seems to always reserve extra space at the end. Anyone seen a site that just nails this?

Definitely design systems related, but I feel like the first time I heard a talk from you it was either at a list apart in Atlanta or a private talk at Airbnb's SF campus. Atomic design was the big aspect that I really took so much from.

Selecting an element and hitting H to quickly hide or show it from the element panel is one of my most used ones.

This is great, thank you. Would love to see custom functions and mixins spec as well. It's all getting so powerful. css.oddbird.net/sasslike/mix...

If you really start using view transitions widely (they're amazing), you run into these types of issues a lot. This is so, so very helpful!

Something new for #css #postcss github.com/csstools/pos...

At first I didn't really see it but the light-dark function is so much more than a convenience method for the media query 🎉

CSS Weekly Issue #574 Learn how to create scroll-driven animations, create clever decorative accents using border-image, inspect Chrome DevTools with Chrome DevTools, and more.

CSS Weekly #574

👆 Scroll-Driven Animations
🖼️ Awesome CSS border-image Property
💪 CSS snippets you should know in 2024

Featuring @seaotta.bsky.social, @sarasoueidan.com, @kilianvalkhof.com, @alvaromontoro.bsky.social.

cssw.io/issue-574

👋 I published a chapter from the Practical Accessibility course on my website. It's an extensive guide to ARIA live regions, how to use them, & how NOT to.

👉 Accessible Notifications with ARIA Live Regions

Part 1: www.sarasoueidan.com/blog/accessi...

Part 2: www.sarasoueidan.com/blog/accessi...

CloseWatcher code example snippet.

New in Chrome 120 is the CloseWatcher. It listens for “close requests” to hook your “close my component” logic on to.

Cool thing is, is that these close requests can originate not only from the ESC key, but also a hardware back button (e.g. Android/Game Controller) or a gesture.