@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 de CSS. Este es un gran cambio para el ecosistema de CSS, ya que permite que los desarrolladores le indiquen al navegador cómo leer y analizar CSS personalizado sin esperar a que los proveedores de navegadores proporcionen compatibilidad integrada para estas funciones. ¡Qué emocionante!

Una de las incorporaciones más interesantes a los CSS dentro del conjunto de Houdini es la API de propiedades y valores.

Esta API potencia las propiedades personalizadas de CSS (también conocidas como variables de CSS), ya que les otorga significado semántico (definido por una sintaxis) y hasta valores de resguardo, lo que permite pruebas de CSS.

Escribe propiedades personalizadas de Houdini

Este es un ejemplo de cómo configurar una propiedad personalizada (piensa: variable de CSS), pero ahora con una sintaxis (tipo), un valor inicial (resguardo) y una herencia booleana (¿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:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

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

Valores de resguardo

Al igual que con cualquier otra propiedad personalizada, puedes obtener (con var) o establecer (escritura/reescritura), 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 otorgó el valor "23" que no es válido. Sin @property, el analizador de CSS ignorará el código no válido. Ahora, el analizador recurre a magenta. Esto permite realizar resguardos y pruebas reales en 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. Los tipos actuales permitidos 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 personalizada)

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

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

En este ejemplo, el porcentaje de parada de gradiente se anima desde un valor inicial del 40% hasta un valor final del 100% mediante una interacción de colocar el cursor sobre un elemento. Deberías ver una transición suave de ese color de gradiente superior hacia abajo.

El navegador de la izquierda admite la API de propiedades y valores de Houdini, lo que permite una transición de detención con gradiente suave. El navegador de la derecha no. El navegador que no es compatible solo puede comprender este cambio como una cadena que va del punto A al punto B. No hay oportunidad de interpolar los valores y, por lo tanto, no se ve esa transición fluida.

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

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Luego, cuando llegue el momento de animarla, podrás actualizar el valor del 40% inicial a 100%:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

Ahora, esto habilitará esa transición de gradiente suave.

Conclusión

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

• ¿Ya está todo listo para Houdini?
• Referencia de MDN Houdini
• Propiedades personalizadas más inteligentes con la nueva API de Houdini
• Cola de problemas del CSSWG de Houdini

Foto de Cristian Escobar en Unsplash