Regla @property CSS

Regla @property CSS

@property 规则用于直接在样式表中定义自定义 CSS 属性，而无需运行任何 JavaScript。

@property 规则具有数据类型检查和约束、设置默认值，并定义属性是否可以继承值。

定义自定义属性的实例：

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

上面的定义表示 --myColor 是一个颜色属性，它可以继承父元素的值，其默认值为 lightgray。

要在 CSS 中使用自定义属性，我们使用 var() 函数：

body {
  background-color: var(--myColor);
}

Uso @property 的好处：

• 类型检查：Es necesario especificar el tipo de datos de la propiedad personalizada, como <number>、<color>、<length>. Esto evita errores y asegura un uso correcto de las propiedades personalizadas
• Establecer valor predeterminado：Se puede establecer un valor predeterminado para la propiedad personalizada. Esto asegura que si se asigna un valor inválido en el futuro, el navegador usará el valor alternativo definido.
• Establecer comportamiento de herencia：Es necesario especificar si la propiedad personalizada puede heredar el valor de su elemento padre.

Compatibilidad del navegador

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

Un ejemplo simple de @property

En el siguiente ejemplo se definen dos propiedades personalizadas:--my-bg-color y --my-txt-color. Luego, el div en background-color y color Utilizamos la propiedad personalizada:

Ejemplo

@property --my-bg-color {
  sintaxis: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  sintaxis: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Prueba personalmente

otro ejemplo @property

En el siguiente ejemplo, utilizamos la propiedad personalizada predeterminada en el elemento <div>. Luego en .fresh y .nature Para cubrir la propiedad personalizada de la clase (al establecer otro color), el efecto es excelente:

Ejemplo

@property --my-bg-color {
  sintaxis: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Prueba personalmente

Para evitar errores a través de la verificación de tipo y valores alternativos

En el siguiente ejemplo, utilizaremos .nature El valor de la propiedad personalizada en la clase es un entero. Esto es inválido, el navegador usará el valor en initial-value Colores alternativos definidos en la propiedad (lightgray):

Ejemplo

@property --my-bg-color {
  sintaxis: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Prueba personalmente

el valor de inherits

En el siguiente ejemplo, utilizaremos inherits El valor se establece en falseEsto significa que las propiedades personalizadas no heredarán el valor de su elemento padre. Ver resultados:

Ejemplo

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

Prueba personalmente

El siguiente ejemplo será inherits El valor se establece en trueEsto significa que las propiedades personalizadas heredarán el valor de su elemento padre. Ver resultados:

Ejemplo

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

Prueba personalmente

Crear animaciones suaves usando @property

Uso @property Las nuevas oportunidades que pueden realizarse con las reglas son animar contenido que antes no se podía animar: la transición. Vea el siguiente ejemplo:

Ejemplo

Para especificar dos propiedades personalizadas para la transición:

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

Prueba personalmente

Regla @property CSS