📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again only when scrolling up again. By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value. 🔗
Bram.us
Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.
 Demo by @npub1xg9g...uter.
Feature detecting Scroll-Driven Animations with `@supports`: you want to check for `animation-range` too. The problem is that a check for simply `animation-timeline: scroll()` does not exclude Firefox Nightly, which only has a partial SDA implementation. Details:
Bram.us
Feature detecting Scroll-Driven Animations with @supports: you want to check for animation-range too
You want to filter out Firefox’s partial implementation …
 image
Something to add to your CSS reset from now on: ``` :root { interpolate-size: allow-keywords; } ``` It enables things like transitions from `height: 0` to `height: auto`.
Chrome for Developers
Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers
Animate to and from intrinsic sizing keywords with `interpolate-size` and `calc-size()`
A often-heard complaint about View Transitions is how it handles clip-path, border-radius, opacity, … The snapshots fade, while you’d want the clip-path to actually animate. Also, nested elements bleed out their container because the snapshots are a flat list instead of a nested tree.
Exciting release, as Safari now joins Chrome in supporting (Same-Document) View Transitions and Style Queries! 🎉 🔗 View Transitions:
Chrome for Developers
Smooth transitions with the View Transition API | View Transitions | Chrome for Developers
The View Transition API lets you add transitions between views of a website.
 🔗 Style Queries:
Chrome for Developers
Getting Started with Style Queries | CSS and UI | Chrome for Developers
Style queries allow developers to query a parent element's style values using the @container rule. In Chrome 111, style queries for CSS custom ...
Front-End Social
Jen Simmons (@jensimmons@front-end.social)
Safari 18.0 is here. Have you seen what’s new for web development? Lots of new CSS, HTML, JS, Web API, media… Plus new Safari features like Dis...
“Shake mouse pointer to locate” is such a good #macOS feature. I use it almost daily. “Where is that damn mouse again?!–Oh, it’s right there.”
New in @ChromeDevTools (in Chrome Canary): You can now force more states – such as :active, :focus, … – onto elements. For example, when inspecting an <input> element you can now also force states such as :enabled, :valid, etc. image
Today I saw this React hook (see photo) get shared on birdsite. It enables one to “automatically scroll down when new messages arrive in a chat”. While it might work, you could — and should — use this little bit of CSS instead: ``` .log { scroll-snap-type: y proximity; align-content: end; } .log::after { display: block; content: ""; scroll-snap-align: end; } ``` “… remains snapped to the bottom …unless the user has scrolled away from that edge” —
CSS Scroll Snap Module Level 1
 image
👀 Apple/WebKit about to express support for cross-document View Transitions (and related features such pageswap, pagereveal, render blocking) + also View Transition Types.
GitHub
CSS same-origin cross-document view-transition · Issue #193 · WebKit/standards-positions
WebKittens @nt1m @smfr Title of the spec CSS View Transitions, Level 2 URL to the spec https://github.com/WICG/view-transitions/blob/main/cross-doc...
 Get the rundown of these features here:
Chrome for Developers
What's new in view transitions? (Google I/O 2024 update) | Blog | Chrome for Developers
Announcing cross-document view transitions for MPA, selective view transitions with active types, and sharing animation styles with view-transition...
 (video included)
Oh nice, @npub1j49x...m4j6 now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard. There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content. You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard. See
Chrome for Developers
Prepare for viewport resize behavior changes coming to Chrome on Android | Blog | Chrome for Developers
What changes are coming to the viewport resize behavior in Chrome 108, why Chrome is making this change, and what you can do to prepare.
 for all details. Supported in Chrome from Chrome 108. No word from Safari on this. image