CSS reemplaza a JavaScript: 3 features de Chrome 146 que lo cambian todo

Summary

El vídeo explica tres innovaciones clave que llegan a Chrome (versiones 146 y 147) para simplificar el desarrollo frontend. Se trata de Scroll Trigger Animation para animar elementos al entrar al viewport sin JavaScript, Element Scope View Transitions para animar componentes de forma aislada, y la propiedad Corner Shape para personalizar geometrías de bordes sin usar clips o pseudo-elementos. Todas estas herramientas buscan reducir la carga de JavaScript y mejorar el rendimiento ejecutando animaciones fuera del hilo principal.

Topics covered

• Scroll Trigger Animation
• Diferencia con Scroll Driven

+6 more topics (full content when you follow the channel)

Transcript excerpt

I've been writing this for years, and so have you . Using the Intersection Observer to animate elements as they enter the viewport is part of the lifecycle of any project. Well, in Chrome version 146 this is no longer necessary. Now with these four lines of CSS JavaScript, without observers and running outside the main thread. Today I'm going to tell you about the three CSS features that are coming in Chrome versions 146 and 147 and that will probably change the way we build web interfaces. Before we get into the code, a quick context. Chrome has been extending the CSS platform for quite some time now in ways that previously seemed impossible. Scroll Driven Animation arrived in Chrome 115. Page View Transitions arrived in Chrome 111. And the difference with what I'm going to show you today, which comes in versions 146 and 147, solves quite common real-world use cases that those of u…