Transiciones y protección de datos en CSS
Propiedades personalizadas de CSS, también conocidas como Variables CSS, le permite definir sus propias propiedades en CSS y usar sus valores en todo su CSS. Si bien son increíblemente útiles hoy en día, tienen deficiencias que pueden dificultar el trabajo con ellos: pueden tomar cualquier valor, por lo que pueden ser anulados accidentalmente con algo inesperado, siempre heredan sus valores de sus padres y no puede realizar la transición. Con Houdini’s API de valores y propiedades de CSS nivel 1, ahora disponible en Chrome 78, estas deficiencias se superan, ¡lo que hace que las propiedades personalizadas de CSS sean increíblemente poderosas!
¿Qué es Houdini?
Antes de hablar sobre la nueva API, hablemos de Houdini rápidamente. El grupo de trabajo CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para «desarrollar funciones que expliquen la ‘magia’ del estilo y el diseño en la web». La colección de Especificaciones de Houdini están diseñados para abrir el poder del motor de renderizado del navegador, lo que permite una visión más profunda de nuestros estilos y la capacidad de ampliar nuestro motor de renderizado. Con esto, finalmente es posible escribir valores CSS en JavaScript y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la web.
API de valores y propiedades de CSS nivel 1
los API de valores y propiedades de CSS nivel 1 (Houdini Props and Vals) nos permite dar estructura a nuestras propiedades personalizadas. Esta es la situación actual cuando se utilizan propiedades personalizadas:
.thing {
--my-color: green;
}Dado que las propiedades personalizadas no tienen tipos, pueden anularse de formas inesperadas. Por ejemplo, considere lo que sucede si define --my-color con una URL.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}Aquí, porque --my-color no está escrito, no sabe que una URL no es un valor de color válido. Cuando lo usamos, vuelve a los valores predeterminados (negro para color, transparente para background). Con Houdini Props y Vals, las propiedades personalizadas se pueden registrado para que el navegador sepa lo que debería ¡ser!
Ahora, la propiedad personalizada --my-color está registrado como un color! ¡Esto le dice al navegador qué tipos de valores están permitidos y cómo puede escribir y tratar esa propiedad!
Anatomía de una propiedad registrada
El registro de una propiedad se ve así:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});Admite las siguientes opciones:
name: string
El nombre de la propiedad personalizada.
syntax: string
Cómo analizar la propiedad personalizada. Puede encontrar una lista completa de posibles valores en el Valores y unidades CSS especificación. Predeterminado a *.
inherits: boolean
Si hereda el valor de su padre. Predeterminado a true.
initialValue: string
Valor inicial de la propiedad personalizada.
Echando un vistazo más de cerca a syntax. Hay una serie de opciones válidas
que van desde números hasta colores para
<custom-ident>
tipos. Estas sintaxis también se pueden modificar utilizando los siguientes valores
- Anexando
+significa que acepta una lista de valores separados por espacios de esa sintaxis. Por ejemplo,<length>+sería una lista de longitudes separadas por espacios - Anexando
#significa que acepta una lista de valores separados por comas de esa sintaxis. Por ejemplo,<color>#sería una lista de colores separados por comas - Añadiendo
|entre sintaxis o identificadores significa que cualquiera de las opciones proporcionadas es válida. Por ejemplo,<color># | <url> | magicpermitiría una lista de colores separados por comas, una URL o la palabramagic.
Gotchas
Hay dos trampas con Houdini Props y Vals. La primera es que, una vez definida, no hay forma de actualizar una propiedad registrada existente, e intentar volver a registrar una propiedad arrojará un error que indica que ya se ha definido.
En segundo lugar, a diferencia de las propiedades estándar, las propiedades registradas no se validan cuando se analizan. Más bien, se validan cuando se calculan. Eso significa que los valores inválidos no aparecerán como inválidos al inspeccionar las propiedades del elemento, y que incluir una propiedad inválida después de una válida no volverá a la válida; una propiedad inválida, sin embargo, volverá al valor predeterminado de la propiedad registrada.
Animando propiedades personalizadas
Una propiedad personalizada registrada proporciona un bono divertido más allá de la verificación de tipos: ¡la capacidad de animarla! Un ejemplo de animación básico se ve así:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script><style>
button {
--stop-color: red;
transition: --stop-color: 1s;
}
button:hover {
--stop-color: green;
}
</style>
Cuando pasas el cursor sobre el botón, ¡se animará de rojo a verde! Sin registrar la propiedad, saltará de un color a otro porque, sin estar registrado, el navegador no sabe qué esperar entre un valor y el siguiente y, por lo tanto, no puede garantizar la capacidad de realizar la transición. Sin embargo, este ejemplo puede llevarse un paso más allá para animar gradientes CSS. El siguiente CSS se puede escribir con la misma propiedad registrada:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}button:hover {
--stop-color: green;
}
Esto animará nuestra propiedad personalizada que es parte del linear-gradient, animando así nuestro gradiente lineal. Echa un vistazo al Glitch a continuación para ver el código completo en acción y juega con él tú mismo.
Conclusión
Houdini está en camino a los navegadores y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el API de pintura ya enviado y ahora Custom Props and Vals, nuestra caja de herramientas creativas se está expandiendo, lo que nos permite definir propiedades CSS escritas y usarlas para crear y animar diseños nuevos y emocionantes. También hay más en camino, en el Cola de problemas de Houdini donde puede dar su opinión y ver qué sigue para Houdini. Houdini existe para desarrollar funciones que expliquen la «magia» del estilo y el diseño en la web, así que sal y aprovecha esas funciones mágicas.
Foto por
Maik Jonietz
en
Unsplash
