Adiós al JS para animar el flujo entre páginas 🚀
Imagina crear transiciones fluidas entre diferentes documentos HTML sin escribir una sola línea de JavaScript. Parece magia, pero es el nuevo CSS Navigation Matching. Durante años, los ingenieros hemos luchado contra el
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Imagina crear transiciones fluidas entre diferentes documentos HTML sin escribir una sola línea de JavaScript. Parece magia, pero es el nuevo CSS Navigation Matching.
- Durante años, los ingenieros hemos luchado contra el "salto brusco" o el flash blanco al navegar entre páginas. La solución siempre fue la misma: librerías pesadas de JS o frameworks de Single Page Application (SPA) que
- El insight clave aquí es el cambio hacia una web declarativa: el navegador ahora puede entender la intención de la navegación, no solo el evento.
- Así es como cambia el juego:
Bloque 1
Imagina crear transiciones fluidas entre diferentes documentos HTML sin escribir una sola línea de JavaScript. Parece magia, pero es el nuevo CSS Navigation Matching.
Durante años, los ingenieros hemos luchado contra el "salto brusco" o el flash blanco al navegar entre páginas. La solución siempre fue la misma: librerías pesadas de JS o frameworks de Single Page Application (SPA) que complican la arquitectura solo para ganar fluidez visual.
Bloque 2
El insight clave aquí es el cambio hacia una web declarativa: el navegador ahora puede entender la intención de la navegación, no solo el evento.
Así es como cambia el juego:
Bloque 3
• @location: Permite definir rutas y patrones de URL directamente en CSS, eliminando la necesidad de mapear rutas en JS. • @navigation: Ejecuta transiciones basadas en el origen y destino (from/to), permitiendo animaciones contextuales. • :nav-source: Un pseudo-elemento que identifica exactamente qué elemento disparó la navegación. • :link-to(): Capacidad de estilar un enlace basándose en su destino, no en su posición actual.
Reducir la dependencia de JavaScript en la capa de presentación no solo optimiza el rendimiento (LCP, CLS), sino que simplifica drásticamente el mantenimiento del frontend.
Bloque 4
¿Creen que el CSS debería seguir absorbiendo esta lógica de flujo o prefieren mantener el control total en el framework de JS?