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

Transiciones y protección de datos en CSS

Sam Richard

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 todo el CSS. Si bien son increíblemente útiles hoy en día, tienen deficiencias que pueden dificultar su uso: pueden tomar cualquier valor, por lo que pueden anularse accidentalmente con algo inesperado, siempre heredan sus valores de su elemento superior y no puedes realizar transiciones con ellas. Con la API de nivel 1 de propiedades y valores de CSS de Houdini, que ya está disponible en Chrome 78, se superan estas deficiencias, lo que hace que las propiedades personalizadas de CSS sean increíblemente potentes.

¿Qué es Houdini?

Antes de hablar de la nueva API, hablemos brevemente de Houdini. El grupo de trabajo de CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para "desarrollar funciones que expliquen la 'magia' del diseño y el estilo en la Web". La colección de especificaciones de Houdini está diseñada para abrir la potencia del motor de renderización del navegador, lo que permite obtener información más detallada sobre nuestros estilos y la capacidad de extender nuestro motor de renderización. Con esto, finalmente es posible escribir valores de CSS en JavaScript y usar polyfills o inventar CSS nuevo sin afectar el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la Web.

Nivel 1 de la API de propiedades y valores de CSS

La API de propiedades y valores de CSS de nivel 1 (Houdini Props and Vals) nos permite dar estructura a nuestras propiedades personalizadas. Esta es la situación actual cuando se usan propiedades personalizadas:

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

Como las propiedades personalizadas no tienen tipos, se pueden anular de formas 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);
}

Aquí, como --my-color no tiene un tipo, 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 propiedades y los valores 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 se permiten 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

Es 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

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

initialValue: string

Es el valor inicial de la propiedad personalizada.

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

• Agregar + significa que acepta una lista de valores de esa sintaxis separados por espacios. Por ejemplo, <length>+ sería una lista de longitudes separadas por espacios.
• Agregar # significa que acepta una lista de valores de esa sintaxis separados por comas. 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.

Gotchas

Hay dos problemas con las propiedades y los valores de Houdini. La primera es que, una vez definida, no hay forma de actualizar una propiedad registrada existente, y si intentas volver a registrar una propiedad, se arrojará 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. En cambio, se validan cuando se calculan. Esto significa que los valores no válidos no aparecerán como no válidos cuando se inspeccionen las propiedades del elemento, y que 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 recurrirá al valor predeterminado de la propiedad registrada.

Cómo animar propiedades personalizadas

Una propiedad personalizada registrada proporciona una ventaja divertida más allá de la verificación de tipos: la capacidad de animarla. Un ejemplo de animación básica 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 al otro, ya que, sin registrarse, 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 se puede llevar un paso más allá para animar 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;
}

Esto animará nuestra propiedad personalizada que forma parte de linear-gradient y, por lo tanto, animará nuestro gradiente lineal. Consulta el Codepen que aparece a continuación para ver el código completo en acción y probarlo por tu cuenta.

Conclusión

Houdini está en camino a los navegadores y, con él, formas completamente nuevas de trabajar con CSS y extenderlo. Con la API de Paint ya enviada y ahora con las propiedades y los valores personalizados, nuestra caja de herramientas creativas se está expandiendo, lo que nos permite definir propiedades de CSS con tipo y usarlas para crear y animar diseños nuevos y emocionantes. También hay más en camino en la lista de problemas de Houdini, donde puedes enviar comentarios y ver qué sigue para Houdini. Houdini existe para desarrollar funciones que expliquen la "magia" del diseño y el diseño en la Web, así que sal y aprovecha esas funciones mágicas.