Propiedades personalizadas más inteligentes con la nueva API de Houdini

Transiciones y protección de datos en CSS

Las propiedades personalizadas de CSS, también conocidas como variables de CSS, te permiten definir tus propias propiedades en CSS y usar sus valores en toda la CSS. Si bien son muy útiles en la actualidad, tienen deficiencias que pueden dificultar su trabajo: pueden tomar cualquier valor y es posible que se anulen accidentalmente con algo inesperado. Siempre heredan sus valores de su elemento superior, y no puedes realizar la transición de ellos. Con el nivel de API 1 de propiedades y valores de CSS de Houdini, que ahora está disponible en Chrome 78, estas deficiencias se trascienden, lo que hace que las propiedades personalizadas de CSS sean increíblemente potentes.

¿Qué es Houdini?

Antes de hablar sobre la nueva API, hablemos sobre Houdini rápidamente. El grupo de trabajo de Houdini para CSS-TAG, 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 se diseñó para abrir la potencia del motor de renderización del navegador, lo que permite obtener estadísticas más detalladas de nuestros estilos y ampliar nuestro motor de renderización. Con esto, finalmente son posibles valores de CSS escritos en JavaScript y polyfills o la invención de nuevas CSS sin un impacto de rendimiento. Houdini tiene el potencial de superar la creatividad en la web.

Nivel de API 1 de propiedades y valores de CSS

El nivel de API 1 de propiedades y valores de CSS (props y vales de Houdini) nos permite estructurar nuestras propiedades personalizadas. Esta es la situación actual cuando se usan propiedades personalizadas:

.thing {
  --my-color: green;
}

Debido a que las propiedades personalizadas no tienen tipos, se pueden anular de maneras inesperadas. Por ejemplo, considera lo que sucede si defines --my-color con una URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

En este caso, debido a que --my-color no está escrito, no sabe que una URL no es un valor de color válido. Cuando lo usamos, recurre a los valores predeterminados (negro para color, transparente para background). Con las props y Vals de Houdini, las propiedades personalizadas se pueden registrar para que el navegador sepa lo que debería ser.

Ahora, la propiedad personalizada --my-color se registra como un color. Esto le indica 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 de la siguiente manera:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Se admiten las siguientes opciones:

name: string

El nombre de la propiedad personalizada.

syntax: string

Cómo analizar la propiedad personalizada Puedes encontrar una lista completa de los valores posibles en la especificación de Valores y unidades de CSS. La configuración predeterminada es *.

inherits: boolean

Si hereda el valor de su elemento superior. La configuración predeterminada es true.

initialValue: string

Valor inicial de la propiedad personalizada.

Observa syntax con más detalle. Hay una serie de opciones válidas que van desde números y colores hasta tipos <custom-ident>. Estas sintaxis también se pueden modificar usando los siguientes valores

  • Agregar + 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
  • Agregar # 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.
  • Agregar | entre sintaxis o identificadores significa que cualquiera de las opciones proporcionadas es válida. Por ejemplo, <color># | <url> | magic permitiría una lista de colores separados por comas, una URL o la palabra magic.

Trampas

Con Houdini Props y Vals, hay dos trampas. La primera es que, una vez definida, no hay forma de actualizar una propiedad registrada existente, y, si intentas volver a registrarla, se mostrará un error que indica que ya se definió.

En segundo lugar, a diferencia de las propiedades estándar, las propiedades registradas no se validan cuando se analizan. sino que se validan cuando se procesan. Esto significa que ambos valores no válidos no aparecerán como no válidos cuando se inspeccionen las propiedades del elemento. Incluir una propiedad no válida después de una válida no recurrirá a la válida. Sin embargo, una propiedad no válida sí recurrirá a la configuración predeterminada de la propiedad registrada.

Cómo animar propiedades personalizadas

Una propiedad personalizada registrada ofrece una bonificación divertida más allá de la verificación de tipos: la capacidad de animarla. Un ejemplo básico de animación se ve de la siguiente manera:

<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 coloques el cursor sobre el botón, se animará de rojo a verde. Sin registrar la propiedad, saltará de un color a otro, ya que, sin estar registrado, el navegador no sabrá qué esperar entre un valor y el siguiente y, por lo tanto, no puede garantizar la capacidad de realizar la transición de estos. Este ejemplo puede ir un paso más allá, para animar los gradientes de 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;
}

Esta acción animará nuestra propiedad personalizada que es parte de linear-gradient, lo que animará nuestro gradiente lineal. Consulta la falla a continuación para ver el código completo en acción y pruébalo.

Conclusión

Houdini está en camino a los navegadores y, con él, a formas completamente nuevas de trabajar con CSS y extenderlas. Con la API de Paint ya enviada y ahora las propiedades y Vals personalizadas, nuestra caja de herramientas creativas se está expandiendo, lo que nos permite definir propiedades escritas de CSS y usarlas para crear y animar diseños nuevos y emocionantes. También habrá más novedades en la cola de problemas de Houdini, en la que podrás enviar comentarios y ver las próximas novedades de Houdini. Houdini existe para desarrollar funciones que explican la "magia" del estilo y el diseño en la Web, así que sal y dales un buen uso a esas funciones mágicas.

Foto de Maik Jonietz en Unsplash