CSS está evolucionando con el tiempo y se le agregan funciones más nuevas que facilitan la implementación de las funciones más utilizadas. Hoy veremos una característica que hace que CSS sea aún más poderoso.

La @property (regla at) permite a los desarrolladores definir propiedades personalizadas. En esta publicación, veremos qué es @property, por qué es útil y cómo usarlo con algunos ejemplos prácticos.

¿Qué es la regla @property?

Las propiedades personalizadas (variables) de CSS existen desde hace un tiempo y le permiten almacenar y reutilizar valores como colores, tamaños de fuente o cualquier otro valor de estilo. Sin embargo, hasta hace poco, carecían de funciones avanzadas como la definición de tipos y valores predeterminados. Esto es especialmente útil si queremos implementar animaciones complejas (más sobre esto en próximos posts).

La regla @property representa un registro de propiedad personalizado directamente en la hoja de estilo sin tener que ejecutar ningún js.

Sintaxis básica

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• sintaxis: define el tipo de datos esperado de la propiedad. En este caso, es un color (), pero puede ser cualquier tipo de datos CSS válido como , o .
• hereda: determina si el valor de la propiedad debe ser heredado por los elementos secundarios. Se puede establecer en verdadero o falso.
• valor inicial: establece un valor predeterminado para la propiedad cuando no se proporciona ninguno.

Cuándo usar @property

• Cuando necesitas animar o realizar la transición de una propiedad personalizada para garantizar un comportamiento fluido.
• Para aplicar tipos de datos (como colores, longitudes o números) para evitar errores debidos a valores no válidos.
• Para establecer valores predeterminados para propiedades personalizadas para mantener estilos consistentes cuando faltan valores.
• Controlar la herencia de propiedades personalizadas entre elementos padre e hijo.

Leer más

• Documentos MDN @property

Publicación original