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 hoy en día son increíblemente útiles, tienen deficiencias que pueden dificultar su uso: pueden tomar cualquier valor, por lo que se pueden anular accidentalmente con algo inesperado, siempre heredan sus valores de su elemento superior y no puedes realizar la transición. Con el nivel 1 de la API de CSS Properties and Values de Houdini, que ahora 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 sobre la nueva API, hablemos rápidamente sobre Houdini. El CSS-TAG Houdini Task Force, 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 aprovechar la potencia del motor de renderización del navegador, lo que permite obtener estadísticas más detalladas sobre nuestros estilos y la capacidad de extender nuestro motor de renderización. Con esto, por fin es posible escribir valores de CSS en JavaScript y crear o polyfillar CSS nuevos sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la Web.

Nivel de API 1 de las propiedades y los valores de CSS

El nivel 1 de la API de propiedades y valores de CSS (props y vals 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 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 no se escribe --my-color, no sabe que una URL no es un valor de color válido. Cuando lo usamos, se recurre a los valores predeterminados (negro para color, transparente para background). Con Houdini Props y Vals, las propiedades personalizadas se pueden registrar para que el navegador sepa cómo debe ser.

Ahora, la propiedad personalizada --my-color está registrada 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 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.

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

• El agregado de + 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.
• El agregado de # 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.

Problemas

Hay dos problemas con los elementos y 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 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. En cambio, se validan cuando se calculan. Eso 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 un beneficio divertido más allá de la verificación de tipos: ¡la posibilidad 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 porque, sin estar registrada, 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 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;
}

Esto animará nuestra propiedad personalizada que forma parte de linear-gradient, lo que animará nuestro gradiente lineal. Consulta Glitch 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, se abrirán nuevas formas de trabajar con CSS y de extenderlo. Con la API de Paint ya enviada y ahora los elementos y valores personalizados, nuestra caja de herramientas creativa 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 contenido en camino en la cola de problemas de Houdini, donde puedes enviar comentarios y ver qué novedades hay para Houdini. Houdini existe para desarrollar funciones que expliquen la “magia” del diseño y el estilo en la Web, así que sal y dales un buen uso.

Foto de Maik Jonietz en Unsplash