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 de API 1 de propiedades y valores de CSS de Houdini, que ahora está disponible en Chrome 78, se trascienden 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 Grupo de trabajo de Houdini de CSS-TAG, más conocido como CSS Houdini o simplemente Houdini, existe para "desarrollar funciones que explican la "magia" del diseño y el estilo en la Web". La colección de especificaciones de Houdini se diseñó para ampliar la potencia del motor de renderización del navegador, lo que brinda estadísticas más detalladas sobre nuestros estilos y la capacidad de extender el 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);
}

En este caso, dado que no se escribe --my-color, no se 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 una serie de opciones válidas que van desde números hasta colores y 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.
• 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 trampas con Houdini Props y Vals. 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 indicará 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 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 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. Si no se registra la propiedad, pasará 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 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, nuevas formas de trabajar con CSS y extenderlo. Con la API de Paint ya enviada y ahora Custom Props y Vals, nuestra caja de herramientas de creatividad se está expandiendo, lo que nos permite definir propiedades de 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 las próximas novedades de Houdini. Houdini existe para desarrollar funciones que expliquen la "magia" del estilo y el diseño en la Web, así que publica y aprovecha esas funciones mágicas.

Foto de Maik Jonietz en Unsplash