@property: Las variables de CSS de nueva generación ahora son compatibles con todos los navegadores

Una Kravets

Prepárate para un potenciador de CSS La regla @property, que forma parte del conjunto de APIs de Houdini de CSS, ahora es totalmente compatible con todos los navegadores modernos. Esta función innovadora ofrece nuevos niveles de control y flexibilidad para las propiedades personalizadas de CSS (también conocidas como variables de CSS), lo que hace que tus hojas de estilo sean más inteligentes y dinámicas.

Los beneficios de @property

• Significado semántico: Usa @property para definir un tipo (sintaxis) para tus propiedades personalizadas. Esto le indica al navegador qué tipo de datos contiene tu propiedad personalizada (por ejemplo, colores, longitudes o números), lo que evita resultados inesperados y admite nuevas posibilidades, como animar gradientes.
• Valores de resguardo: No hay más estilos que desaparezcan. Usa @property para establecer un valor inicial para una propiedad personalizada. Si más adelante se asigna un valor no válido, el navegador usará el resguardo definido con elegancia.
• Manejo de errores mejorado: La seguridad de tipos mejorada y la capacidad de establecer resguardos abren nuevas oportunidades para pruebas y validación directamente en tu CSS.

Cómo crear propiedades personalizadas avanzadas

Para crear una propiedad personalizada "estándar", establece un nombre de propiedad precedido por una -- y asígnale un valor. El navegador analiza el valor de estas propiedades personalizadas como una cadena.

En el siguiente ejemplo, se muestra cómo se inicializa una propiedad personalizada predeterminada (basada en cadenas).

:root {
 --myColor: hotpink;
}

Para obtener los beneficios de estas "propiedades personalizadas avanzadas", incluida la semántica más allá de una string, registra tu propiedad personalizada de CSS con @property.

En este ejemplo, la misma propiedad personalizada se inicializa con @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

La propiedad personalizada inicializada con @property proporciona muchos más detalles que solo un nombre y un valor. Incluye el tipo de sintaxis y establece la herencia en verdadero o falso.

El beneficio de este enfoque es que, con la propiedad estándar, esperas que contenga un color como valor, y usarás ese color en otra parte de la hoja de estilo. Si alguien actualizara esa propiedad para tener un número como valor, cualquier uso de la propiedad en otro lugar fallaría. Cuando se usa @property, se define un color de resguardo, junto con un syntax que declara que esta propiedad debe contener un valor de color. Si se usa un valor que no sea de color, se usará el resguardo.

Demostración: Fondo de gradiente centelleante

Una de las interesantes aplicaciones de @property es la animación fluida de propiedades que antes eran imposibles de realizar como transición, como los gradientes, que el navegador percibe como imágenes. Sin embargo, si le asignas un significado sintáctico a las variables a través de @property, estas se pueden usar en una declaración de gradiente. Ahora describirás una animación entre dos valores declarados dentro del gradiente, lo que habilita la animación. Tomemos el siguiente ejemplo: una tarjeta con una animación en segundo plano sutil que consta de dos gradientes radiales que cambian de color en diferentes líneas de tiempo:

Para ello, configura los valores de tus propiedades personalizadas como colores:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Luego, accede a ellos para crear el fondo inicial del gradiente:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Además, puedes actualizar los valores en los fotogramas clave:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

Y anima cada uno de ellos:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Conclusión

Las propiedades personalizadas registradas de CSS son una función muy eficaz que amplía el lenguaje CSS al proporcionar significado y contexto a las variables de CSS. Ahora, como @property se encuentra en el modelo de referencia, la fortaleza de este superpoder de CSS está aumentando.

Lecturas adicionales

• Documentos web de MDN
• @property: Otorga superpoderes a las variables de CSS