Regra @property CSS

Regra @property CSS

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

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

定义自定义属性的实例：

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

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

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

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

Uso @property 的好处：

• 类型检查：É necessário especificar o tipo de dados do atributo personalizado, como <number>、<color>、<length>。Isso previne erros e garante o uso correto do atributo personalizado
• Configuração do valor padrão：Pode-se definir um valor padrão para o atributo personalizado. Isso garante que, se um valor inválido for atribuído posteriormente, o navegador usará o valor de reserva definido.
• Configuração do comportamento de herança：É necessário especificar se o atributo personalizado pode herdar o valor do elemento pai.

Suporte do navegador

Os números na tabela representam a primeira versão do navegador que suporta completamente a regra.

Exemplo simples @property

Neste exemplo, definimos dois atributos personalizados:--my-bg-color e --my-txt-color. Em seguida, o div em background-color e color Para usar o atributo personalizado:

Exemplo

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

Experimente pessoalmente

outro exemplo @property

Neste exemplo, usamos o atributo personalizado padrão no elemento <div>. Em seguida, usamos .fresh e .nature Para sobrescrever o atributo personalizado (definindo outra cor), o efeito é muito bom:

Exemplo

@property --my-bg-color {
  syntax: "<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);
}

Experimente pessoalmente

Para evitar erros, passe tipo de dados e valores de reserva

Neste exemplo, vamos .nature O valor do atributo personalizado na classe é um inteiro. Isso é inválido, o navegador usará no initial-value Cores de reserva definidas no atributo (lightgray):

Exemplo

@property --my-bg-color {
  syntax: "<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;
}

Experimente pessoalmente

usar o valor inherits

Neste exemplo, vamos inherits O valor definido é falseIsso significa que o atributo personalizado não herdará o valor do elemento pai. Ver resultado:

Exemplo

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

Experimente pessoalmente

O próximo exemplo será inherits O valor definido é trueIsso significa que o atributo personalizado herdará o valor do elemento pai. Ver resultado:

Exemplo

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

Experimente pessoalmente

Crie animações suaves usando @property

Uso @property As novas oportunidades que as regras podem implementar são animar conteúdos que antes não podiam ser animados: gradientes. Veja o seguinte exemplo:

Exemplo

Especifique duas propriedades personalizadas para gradiente:

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

Experimente pessoalmente

Regra @property CSS