697: Web Install API, Resizing Text, Active View Transition Type

What It Covers

Shop Talk Show explores emerging web platform features including Web Install API for PWAs, CSS text resizing solutions replacing FitText, scroll-triggered animations, view transition types, and declarative Shadow DOM implementation strategies with service workers.

Key Questions Answered

• •Web Install API: Enables one-click PWA installation via simple button click, eliminating unreliable beforeinstall events. Chrome and Edge support it, but WebKit shows zero interest despite early involvement. Allows custom app stores and community-specific collections, though Apple's resistance may delay universal adoption.
• •CSS Text Sizing: New text-grow and text-shrink properties with per-line scaling eliminate magic numbers required by FitText and container query units. Ships in Chromium now, automatically fits any word to container width without JavaScript or manual calculations, though accessibility concerns exist for minimum font sizes.
• •Declarative Shadow DOM Caching: Service workers can cache Shadow DOM templates in IndexedDB, inject them during fetch to speed subsequent page loads. Cuts JavaScript bundle sizes in half by separating styles from components. Works with streaming transforms but requires careful implementation to avoid hydration conflicts.
• •Scroll-Triggered Animations: New animation-trigger property uses custom identifiers to start animations based on view triggers, not just timelines. Replaces animation-delay for scroll-based starts. Enables paragraph-synchronized image swaps and complex scroll interactions without JavaScript, reusing existing scroll-driven animation view controls.
• •View Transition Types: Active-view-transition-type pseudo-class enables different animations per transition type set via JavaScript events. Allows backwards navigation animations, cache-loaded page effects, or URL-specific transitions. Uses custom identifiers, not dashed identifiers, to categorize and style transitions differently in CSS.