Syntax - Tasty Web Development Treats 799: Hot New and Under-Utilized Browser APIs
Jul 24, 2024
Discover the latest and under-utilized browser APIs revolutionizing web development! The hosts break down the @starting-style CSS feature for seamless transitions, and explore dynamic animations with innovative APIs. Learn about the ScrollSnap API for creating swipeable interfaces, while navigating the differences between Popover and Dialog APIs. They reveal practical coding tips to enhance user interfaces effortlessly and even discuss highlights from Apple TV, blending tech insights with entertaining recommendations.
AI Snips
Chapters
Transcript
Episode notes
Starting Style API
- Use
@starting-styleto apply CSS before an element enters the DOM, eliminating the need for JavaScript transitions. - This simplifies animations by setting initial styles and transitioning smoothly upon element entry.
DOM Manipulation
- Starting style allows you to apply styles before an element's visibility changes, similar to animation libraries.
- It eliminates the need for two-step class toggling (like ".opening" then ".open") for smoother animations.
Scroll Snap for Swipers
- Leverage Scroll Snap API for smooth, mobile-friendly swipers, like Instagram's, without complex JavaScript.
- Implement basic scroll snapping with
scroll-snap-typeon the container andscroll-snap-alignon slides.