Regla CSS @property

Definición y uso

CSS @property Las reglas se utilizan para definir propiedades CSS personalizadas directamente en la tabla de estilos, sin necesidad de ejecutar ningún JavaScript.

@property Las reglas tienen funciones de verificación de tipo de datos y restricciones, pueden establecer valores predeterminados y definir si la propiedad puede heredar valores.

Usar @property Ventajas:

• Verificación de tipo y restricciones: debe especificar el tipo de datos de la propiedad personalizada, por ejemplo <number>, <color>, <length> y otros. Esto puede evitar errores y asegurar el uso correcto de las propiedades personalizadas.
• Establecer el valor predeterminado: se puede establecer un valor predeterminado para la propiedad personalizada. Esto asegura que si se asigna un valor inválido posteriormente, el navegador utilizará el valor de reemplazo definido.
• Establecer el comportamiento de herencia: debe especificar si la propiedad personalizada puede heredar valores del elemento padre.

Ejemplo: definir propiedades personalizadas

@property --my-color {
  sintaxis: "<color>";
  inherits: true;
  initial-value: lightgray;
}

La definición anterior indica que --my-color es una propiedad de color, que puede heredar el valor del elemento padre y tiene un valor predeterminado de lightgray.

Utilizar propiedades personalizadas en CSS:

body {}}
  backgound-color: var(--my-color);
}

Ejemplo

Ejemplo 1

Especifica dos propiedades personalizadas para el degradado - y usa ellas para animar el degradado:

@property --startColor {
  sintaxis: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  sintaxis: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Prueba personal

Ejemplo 2

Especifica dos propiedades personalizadas: una para el tamaño del elemento y otra para el color del elemento:

@property --item-size {
  sintaxis: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  sintaxis: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Prueba personal

Sintaxis de CSS

@property --propertyname {
  sintaxis: "<color>";
  initial-value: red;
  inherits: false;
}

Valor de la propiedad

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que completamente admite la @regla.

Páginas relacionadas

Tutoriales:Regla CSS @property