@property: Otorga superpoderes a las variables de CSS

Una Kravets

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

Una de las incorporaciones más interesantes al CSS en Houdini es la Propiedades y valores API

Esta API potencia las propiedades personalizadas de CSS (también conocidas como variables de CSS) al proporcionarles un significado semántico (definido por una sintaxis) e incluso de resguardo, lo que habilita las pruebas de CSS.

Escribe propiedades personalizadas de Houdini

Este es un ejemplo de cómo configurar una propiedad personalizada (piensa en una variable CSS), pero con una sintaxis (tipo), un valor inicial (resguardo) y un booleano de herencia (no hereda el valor de su elemento superior o no?). La manera actual de hacerlo es mediante 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 es solo se lee como una cadena. ¡Tiene datos!

Valores de resguardo

Al igual que con cualquier otra propiedad personalizada, puedes obtener (con var) o configurar (escribir/reescribir), pero con propiedades personalizadas de Houdini, si estableces una cuando se anula, 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. Pero el desarrollador le dio el token no válido valor “23”. Sin @property, el analizador de CSS ignoraría el elemento un código no válido. Ahora, el analizador recurre a magenta. Esto permite que resguardos reales y pruebas 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ántica 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)

Configurar una sintaxis permite que el navegador compruebe el tipo de propiedades personalizadas. Esto tiene muchos beneficios.

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

Cómo usar una propiedad personalizada con un "número" sintaxis, el gradiente de la izquierda muestra una la transición entre los valores de las paradas. 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 de gradiente se anima a partir de una del 40% a un valor final del 100% cuando se coloca el cursor sobre un elemento. Deberías ver un mensaje suave transición del color del 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. El un navegador no compatible solo puede entender este cambio como una cadena del punto A al punto B. No hay oportunidad de interpolar los valores y por lo que no se ve una 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. Tú 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 sea momento de animarlo, podrás actualizar el valor del 40% inicial a 100%:

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

Esto ahora habilitará esa transición de gradiente suave.

Transición suave de los bordes del gradiente Ver demostración de Glitch
.

Conclusión

La regla @property hace que una tecnología interesante sea aún más accesible para los lo que te permite escribir elementos CSS con significado semántico dentro del mismo estilo CSS. Para aprender más sobre CSS Houdini y la API de propiedades y valores, consulta estos recursos:

Foto de Cristian Escobar en Unsplash.