CSS @property y un nuevo estilo

• La regla @property ya es compatible con todos los navegadores modernos y ofrece una forma de definir explícitamente la sintaxis, el valor inicial y la herencia de las propiedades personalizadas de CSS
• Ha pasado mucho tiempo desde la primera introducción de CSS Houdini y la API de CSS Properties and Values
• A través de demos que exploran las posibilidades de @property, se puede ver lo que la próxima generación de CSS puede ofrecer

Calls to action (elementos de llamada a la acción)

• Los CTA llamativos en páginas web se usan en muchos sitios
• Probó este estilo directamente y el resultado puede verse en CodePen
• Si abres el panel CSS del demo, puedes ver la regla @property relacionada con la propiedad personalizada que necesita animación

@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}  

• La regla @property le indica al navegador qué sintaxis permitir y establece el valor inicial en 0deg
• Esto permite que el navegador interpole suavemente de 0deg a 360deg y muestre un gradiente giratorio

@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}  

• Un demo simple de rotación de gradiente muestra las pocas líneas de código necesarias para implementar esta idea

Transición suave al pasar el cursor

• Cuando se pasa el cursor sobre un elemento, se necesitan algunos componentes especiales para lograr una transición suave del gradiente
• Cada propiedad personalizada que necesita animación declara su sintaxis en la definición @property, para que el navegador pueda interpolar los cambios de valor sin saltos

.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}  

• El valor --gradient-percent determina el tamaño del área brillante, y al hacer hover la luz se alarga con un porcentaje mayor
• El valor --gradient-angle-offset reajusta el ángulo del gradiente para que la luz no retroceda al hacer hover

Ajuste de la velocidad de rotación

• Un truco de CSS para ralentizar la rotación al hacer hover resulta muy útil
• Se declara la misma animación de rotación dos veces, y la segunda se configura en reversa para dejarla pausada, dividiendo la duración a la mitad
• Cuando el elemento entra en hover, animation-play-state: running sobrescribe el valor pausado y hace que la rotación se vuelva más lenta, a media velocidad

Pequeños puntos brillantes

• Se añade un efecto de pequeños puntos brillantes dentro del botón
• Para esto se crea un fondo con radial-gradient

.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}  

• La propiedad personalizada --gradient-angle se usa en una máscara conic-gradient para revelar mientras rota parte del patrón de puntos

Mejoras de color al hacer hover

• El estilo de hover se mejora para darle más profundidad y hacerlo más llamativo
• El texto del botón se envuelve en un elemento span, y se aplica una sombra de caja desenfocada para que se expanda y contraiga al hacer hover

Introducción de un nuevo estilo

• Muchas de las técnicas anteriores eran casi imposibles hasta hace muy poco
• Definir explícitamente las propiedades personalizadas abre muchas oportunidades
• Genera expectativa ver cómo se aprovechará @property en aplicaciones grandes y sistemas de diseño

Resumen de GN⁺

• La regla @property ofrece una forma de definir explícitamente la sintaxis, el valor inicial y la herencia de las propiedades personalizadas de CSS
• Gracias a esta función, los desarrolladores web pueden implementar animaciones y estilos más complejos y sofisticados
• En particular, tiene un gran potencial de uso en aplicaciones a gran escala y sistemas de diseño
• Otros proyectos con funciones similares incluyen CSS Houdini y la API de CSS Properties and Values

[GN⁺]

Comentarios en Hacker News

• Se siente como si el cerebro se resistiera al encontrarse con un concepto nuevo

  • Recomiendan leer el artículo de MDN
  • Hay que probar @property directamente para entenderlo
  • Al implementar una UI compleja, es importante minimizar la dependencia de JS

• No es desarrollador web, pero puede usar frameworks web básicos

  • Recuerda cuando CSS apareció por primera vez
  • No entiende el CSS del primer ejemplo en CodePen
  • Se pregunta si un sistema de estilos necesita un mini lenguaje de programación de animaciones
  • Piensa que quizá también podría hacerse con JavaScript

• Le resultan interesantes los trabajos recientes en CSS, especialmente Houdini

  • Le da una sensación parecida a cuando recibió un libro de características de IE 5.5
  • Se han añadido nuevas funciones a CSS, pero eran cosas básicas
  • Los desarrolladores de IE podían convertir código JS en módulos y adjuntarlos a elementos desde CSS
  • Ahora estamos recuperando ese tipo de capacidades otra vez

• Que algo sea posible no significa que necesariamente deba hacerse

  • Cuando aparecieron por primera vez los LED azul brillante, se usaron en todo el hardware, pero no aportaban valor a los usuarios

• Las cosas que se pueden hacer con animaciones CSS se sienten como magia

  • Como es algo exclusivo de CSS, es difícil de aprender y de conceptualizar
  • Programar en JS resulta más fácil
  • Le cuesta por la gran cantidad de opciones de uso de CSS flex

• Es una demo técnicamente interesante, pero no deberían animarse los botones de esta manera

  • Todo el mundo intenta agregar y animar bordes con degradado morado
  • Que algo sea posible no significa que necesariamente deba hacerse
  • La pauta es escribir CSS personalizado para quitar este tipo de estilos

• Los envíos anteriores no recibieron mucha atención, pero son interesantes y educativos

  • enlace

• Este sitio web le da alegría

  • Siempre le ha gustado experimentar con CSS
  • Al construir una carrera en desarrollo web, aprendió que mucha gente odia CSS
  • Ha dedicado mucho tiempo a explorar y experimentar con HTML+CSS
  • La mayoría de la gente pensaría que es una pérdida de tiempo
  • Este sitio le alegró el día

• Disfruta trabajar con CSS, pero ve que sus colegas tienen dificultades

  • Recomienda mucho el canal de YouTube de Kevin Powell
  • Hay un video que explica funciones útiles sobre propiedades registradas
  • enlace al video
  • También hay un artículo que explica fácilmente las propiedades registradas
  • enlace al artículo

• Hace tiempo que no hacía desarrollo web y le tomó tiempo entender qué hace esta función

  • Cree que el artículo no lo explica bien
  • La nueva función permite usar los valores definidos en el bloque @property --gradient-angle {...}
  • Tiene claro qué hace la parte inherits: false;, pero no entiende por qué es necesaria
  • Se pregunta por qué hay que controlarlo en un segundo lugar si los selectores CSS ya pueden controlar la herencia
  • No entiende por qué hay que definir el tipo en el bloque @property
  • Piensa si el navegador no podría inferir el tipo viendo dónde se usa @property