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

Carlos Azaustre - AprendiendoDEV

Resumen

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.

Capítulos

  1. 0:00Introducción y fin de Intersection Observer
  2. 2:37Scroll Trigger Animation vs Scroll Driven
  3. 3:06Evitando colisiones con Trigger Scope
  4. 3:47Evolución de las View Transitions
  5. 4:29Implementando transiciones por elementos
  6. 5:32Casos de uso para transiciones locales
  7. 6:11Introducción a la propiedad Corner Shape
  8. 6:20Tipos de formas disponibles
  9. 7:04Simplificando tooltips con Border Shape
  10. 8:01Hoja de ruta para producción
  11. 8:58Estrategia de adaptación progresiva

Temas tratados

  • Scroll Trigger Animation
  • Diferencia con Scroll Driven

+6 temas más (contenido completo al seguir el canal)

Extracto de la transcripción

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…