CSS ahora puede ver lo que antes solo JS sabía 🤯
Siempre hemos dependido de JavaScript para rastrear la posición del cursor, la velocidad del scroll o el estado de un formulario para luego 'inyectar' esos valores en CSS. El problema es que escribir ese mismo 'glue cod
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
- Siempre hemos dependido de JavaScript para rastrear la posición del cursor, la velocidad del scroll o el estado de un formulario para luego 'inyectar' esos valores en CSS.
- El problema es que escribir ese mismo 'glue code' una y otra vez es tedioso, ensucia el repositorio y añade una capa de complejidad innecesaria al mantenimiento.
- Aquí es donde entra 'Prop For That'. La idea es brillante: crear 'live props' que el navegador expone directamente a CSS sin que tengas que programar la lógica de captura.
- Así es como cambia el flujo de trabajo:
Bloque 1
Siempre hemos dependido de JavaScript para rastrear la posición del cursor, la velocidad del scroll o el estado de un formulario para luego 'inyectar' esos valores en CSS.
El problema es que escribir ese mismo 'glue code' una y otra vez es tedioso, ensucia el repositorio y añade una capa de complejidad innecesaria al mantenimiento.
Bloque 2
Aquí es donde entra 'Prop For That'. La idea es brillante: crear 'live props' que el navegador expone directamente a CSS sin que tengas que programar la lógica de captura.
Así es como cambia el flujo de trabajo:
Bloque 3
• Implementación declarativa: Solo importas la librería y añades un atributo data-props-for en tu HTML.
• Acceso instantáneo: Variables como --live-pointer-x o --live-pointer-y quedan disponibles inmediatamente en tu hoja de estilos.
Bloque 4
• Menos JS, más CSS: Delegas la manipulación de estados del navegador al motor de renderizado, optimizando la limpieza del código.
Estamos pasando de una era de manipulación imperativa a una donde el estilo es consciente del entorno del usuario de forma nativa.
Bloque 5
¿Ustedes siguen usando JS para animaciones basadas en el cursor o ya migraron a soluciones más declarativas?