@property: Otorga superpoderes a las variables de CSS

Una Kravets

CSS Houdini es un término general que abarca un conjunto de APIs de bajo nivel que exponen partes del motor de renderización de CSS y les brindan a los desarrolladores acceso al modelo de objetos CSS. Este es un cambio enorme para el ecosistema de CSS, ya que permite a los desarrolladores indicarle al navegador cómo leer y analizar CSS personalizado sin esperar a que los proveedores de navegadores proporcionen compatibilidad integrada con estas funciones. ¡Qué emocionante!

Una de las incorporaciones más interesantes de CSS dentro del paraguas de Houdini es la API de Properties and Values.

Esta API potencia tus propiedades personalizadas de CSS (también conocidas comúnmente como variables de CSS) otorgándoles un significado semántico (definido por una sintaxis) y hasta valores de resguardo, lo que permite realizar pruebas de CSS.

Cómo escribir propiedades personalizadas de Houdini

Este es un ejemplo de cómo establecer una propiedad personalizada (piensa en una variable de CSS), pero ahora con una sintaxis (tipo), un valor inicial (reemplazo) y un valor booleano de herencia (¿hereda el valor de su elemento superior o no?). La forma actual de hacerlo es a través de CSS.registerProperty() en JavaScript, pero en navegadores compatibles, puedes usar @property:

Archivo JavaScript independiente (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Se incluye en el archivo CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Ahora puedes acceder a --colorPrimary como a cualquier otra propiedad personalizada de CSS a través de var(--colorPrimary). Sin embargo, la diferencia aquí es que --colorPrimary no solo se lee como una cadena. Tiene datos.

Valores de resguardo

Al igual que con cualquier otra propiedad personalizada, puedes obtener (con var) o establecer (escribir o reescribir) valores, pero con las propiedades personalizadas de Houdini, si estableces un valor falso cuando lo anulas, el motor de renderización de CSS enviará el valor inicial (su valor de resguardo) en lugar de ignorar la línea.

Considera el siguiente ejemplo. La variable --colorPrimary tiene un initial-value de magenta. Sin embargo, el desarrollador le asignó el valor no válido “23”. Sin @property, el analizador de CSS ignoraría el código no válido. Ahora, el analizador recurre a magenta. Esto permite realizar pruebas y resguardos reales dentro de CSS. ¡Bravo!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Sintaxis

Con la función de sintaxis, ahora puedes escribir CSS semántico especificando un tipo. Entre los tipos actuales que se permiten, se incluyen los siguientes:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (una string de identificador personalizado)

Establecer una sintaxis permite que el navegador verifique el tipo de propiedades personalizadas. Esto tiene muchos beneficios.

Para ilustrar este punto, te mostraré cómo animar un gradiente. Actualmente, no hay forma de animar (o interpolar) sin problemas entre los valores de gradiente, ya que cada declaración de gradiente se analiza como una cadena.

Con una propiedad personalizada con una sintaxis de "número", el gradiente de la izquierda muestra una transición fluida entre los valores de parada. El gradiente de la derecha usa una propiedad personalizada predeterminada (sin sintaxis definida) y muestra una transición abrupta.

En este ejemplo, el porcentaje de parada del gradiente se anima de un valor inicial de 40% a un valor final de 100% a través de una interacción de desplazamiento del mouse. Deberías ver una transición suave de ese color de gradiente superior hacia abajo.

El navegador de la izquierda admite la API de Houdini Properties and Values, lo que permite una transición suave de parada de gradiente. El navegador de la derecha no lo hace. El navegador que no es compatible solo puede entender este cambio como una cadena que va del punto A al punto B. No hay oportunidad de interpolar los valores, por lo que no ves esa transición fluida.

Sin embargo, si declaras el tipo de sintaxis cuando escribes propiedades personalizadas y, luego, usas esas propiedades personalizadas para habilitar la animación, verás la transición. Puedes crear una instancia de la propiedad personalizada --gradPoint de la siguiente manera:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Luego, cuando llegue el momento de animarlo, puedes actualizar el valor del 40% inicial a 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Esto permitirá esa transición de gradiente suave.

Bordes de gradientes con transiciones suaves. Ver demostración en Glitch

Conclusión

La regla @property hace que una tecnología emocionante sea aún más accesible, ya que te permite escribir CSS con significado semántico dentro del propio CSS. Para obtener más información sobre CSS Houdini y la API de Properties and Values, consulta estos recursos:

Foto de Cristian Escobar en Unsplash.