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

Una Kravets

Fecha de publicación: 12 de julio de 2024

Prepárate para un aumento de potencia de CSS. La regla @property, que forma parte del paraguas de APIs de CSS Houdini, ahora es totalmente compatible con todos los navegadores modernos. Esta función revolucionaria desbloquea 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: Ya no se perderán los estilos. 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 de forma fluida.
  • Manejo de errores mejorado: La seguridad de tipos mejorada y la capacidad de establecer resguardos abren nuevas oportunidades para pruebas y validaciones directamente en tu CSS.

Crea propiedades personalizadas avanzadas

Para crear una propiedad personalizada "estándar", establece un nombre de propiedad al que se le antepone un -- 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", incluidas las semánticas más allá de una cadena, 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 que lo uses en otra parte de la hoja de estilo. Si alguien actualizara esa propiedad para que tenga un número como valor, fallaría cualquier uso de la propiedad en otro lugar. Con @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 es de color, se usará el resguardo.

Demostración: Fondo de gradiente centelleante

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

Usa @property para aplicar diseño a colores animados en un gradiente de fondo.

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, accedes a ellos para crear el fondo de gradiente inicial:

.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, actualiza 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 los siguientes elementos:

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 potente que extiende el lenguaje CSS, ya que proporciona significado y contexto a las variables de CSS. Ahora que @property llegó al modelo de referencia, este superpoder de CSS está creciendo en fuerza.

Lecturas adicionales