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?

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?

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

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.